직접 사용하는 색상 코드 & 색상 코드 추천 사이트 TOP 3

웹사이트를 운영하면서 자주 사용하는 색상 코드를 페이지에 저장해 두고, 필요할 때마다 사이트 검색 기능을 통해 바로 접속하여 활용할 필요성을 느껴서 페이지를 만들게 되었습니다.

추가로, 색상 코드 조합 사이트도 유용하기 때문에 두 가지 주제로 리스트를 정리했습니다.

Ⅰ. 자주 사용하는 색상 코드

제 취향에 맞춰 개인적으로 사이트에서 그래프, 콜 투 액션 버튼 링크 등에 직접 활용하는 컬러 팔레트입니다.

1. 버튼 링크

내 색상 코드-콜투 액션 버튼(#5596FB)
내 색상 코드-콜투 액션 버튼(#367AE4)
#5596FB

별도 설정

#367AE4

다른 사이트도 많이 사용하는 색상

2. 직접 사용하는 헥스 코드(ex. 웹사이트 그래프)

2.1 여러 헥스 코드

 #DC143C
#F9AB00
#FFFF00
#87CEFA
#A9A9A9
#8A2BE2

2.2 Green colors

#00FF00

Lime

#5EB982
#33EA4D
#2DB400

네이버에서 사용(로고 등)

#008000

Green

#006400

다크 그린

2.3 Blue colors

#0000FF
#4169E1
#1E90FF
#6495ED
#B0C4DE
#ADD8E6

2.4 Purple, violet, and magenta colors

#800080
#8B008B
#8A2BE2
#FF00FF
#EE82EE
#E6E6FA

2.5 Pink colors

#C71585
#FF1493
#DB7093
#FF69B4
#FFB6C1
#FFC0CB

2.6 Red colors

#FF0000
#DC143C
#CD5C5C
#F08080
#E9967A
#FFA07A

2.7 Orange colors

#FF4500
#FF6347
#FF8C00
#FF7F50
#FFA500

2.8 Yellow colors

#FFFF00
#EEE8AA
#FFE4B5
#FAFAD2
#FFFFE0

2.9 White colors

#FAF0E6
#F5F5F5
#F0F8FF
#F8F8FF
#F0FFFF
#FFFFFF

2.10 Gray and black colors

#000000
#2F4F4F
#696969
#708090
#808080
#D3D3D3

3. 모든 RGB, HEX 목록

✅ 표 검색을 위한 검색어 목록

Pink, Red, Orange, Yellow, Brown, Purple, Blue, Cyan, Green, White, Gray, black

Ⅱ. 색상 코드 조합 추천 사이트 TOP 3

1. Adobe Color

색상 휠테마 추출
색상 코드 조합 - Adobe Color(색상 휠)
색상 코드 조합 - Adobe Color(테마 추출)

Adobe에서 제공하는 무료 색상 조합 생성 도구로, 다양한 색상 규칙을 적용해 팔레트를 만들 수 있습니다. 웹, 그래픽, UI 디자인 등 다양한 분야에서 활용 가능하며, 저장 및 공유 기능도 제공합니다.

2. Color hunt

색상 코드 조합 - Color Hunt

Color Hunt는 전 세계 디자이너들이 공유하는 인기 색상 팔레트를 모아 제공하는 사이트입니다. 심플하고 직관적인 인터페이스로 빠르게 원하는 색상 조합을 찾을 수 있습니다. 웹 디자인, 그래픽, SNS 콘텐츠 등 다양한 용도에 활용 가능합니다.

3. Color Space

Color Space는 입력한 기본 색상을 바탕으로 다양한 조화로운 색상 팔레트를 생성해 주는 사이트입니다. 각 색상의 HEX 코드와 미리보기 기능을 제공하여 디자인에 바로 활용할 수 있습니다. 웹, UI, 그래픽 디자인 등 다양한 프로젝트에서 유용하게 사용할 수 있습니다.

생성 전생성 후
색상 코드 조합 - Color Space(색상 생성) 1
색상 코드 조합 - Color Space(색상 생성) 2

Similar Posts

  • [SEO] 사이트맵(SiteMap) 정의 | 구글, 네이버, 빙 사이트맵 제출 방법

    검색엔진최적화SEO를 진행할 때 처음에 접하게 되는 단어중 하나가 사이트맵SiteMap입니다. Sitemap이란 무엇이며, 어떤 용도로 사용되는지 알아 보겠습니다. 목차Ⅰ. 자주 사용하는 색상 코드1. 버튼 링크2. 직접 사용하는 헥스 코드(ex. 웹사이트 그래프)3. 모든 RGB, HEX 목록Ⅱ. 색상 코드 조합 추천 사이트 TOP 31. Adobe Color2. Color hunt3. Color Space 사이트맵 정의 Sitemap이란 구글 및 네이버와 같은…

  • 제로클릭 검색 : 2025년 AI 시대에 클릭 없는 세상이 주는 마케팅의 대전환

    클릭 없이 끝나는 검색이 점점 늘어나고 있습니다. 제로클릭 검색은 사용자가 웹사이트를 클릭하지 않고 검색 결과 페이지에서 원하는 답을 얻는 것을 의미합니다. 2025년 10월 현재 구글 검색은 60%~80%가 클릭 없이 종료된다고 합니다. 이는 곧 구글 검색 첫 페이지 상단에 글이 있더라도 예전과 같은 트래픽을 기대할 수 없다는 것을 의미합니다. 이 글에서는 제로 클릭 검색에…

  • [SEO]외부 링크(External Links)란 무엇인가?

    검색엔진최적화(SEO)에서 외부 링크(External Link)는 내 웹사이트에서 다른 웹사이트로 연결하는 하이퍼링크입니다. 아웃바운드 링크라고도 부르는 외부 링크는 검색 엔진 결과 페이지(SERP) 결과를 표시할 때 구글에서 고려하는 중요한 순위 요소 중 하나입니다. 내 웹사이트에서 웹사이트 내 다른 페이지를 링크한 내부 링크와는 다른 개념인 아웃바운드 링크는내 웹사이트(A)에서 콘텐츠를 발행할 때 특정 단어에 대한 추가 설명이 필요하거나 참조한…

  • 크롬 개발자 도구 Coverage: 사용하지 않는 코드(CSS, JS) 찾기

    웹사이트의 속도는 단순히 서버 응답이나 캐시 설정뿐 아니라, “얼마나 많은 코드가 실제로 사용되는가”에 따라 크게 달라집니다. 크롬 개발자 도구 Coverage 탭은 페이지에서 로드된 CSS·JavaScript 파일의 실제 사용 비율을바이트 단위로 분석하여, 코드 낭비를 한눈에 시각화 해주는 도구입니다. 특히 워드프레스와 같은 CMS 환경에서는 테마·플러그인별로 불필요하게 로드되는 리소스가 많기 때문에,Coverage 탭은 사용하지 않는 자바스크립트 및 css…

  • [MS 365] 아웃룩 검색 방법 및 검색 오류 해결

    아웃룩 검색 기능은 메일을 보낸 사람, 내용, 아웃룩 작업과 일정 등 다양한 항목을 찾을 수 있는 기능입니다. 아웃룩 검색 방법은 [Ctrl+E] 단축키로 키워드를 입력하면 관련 항목을 찾을 수 있습니다. 검색하는 키워드는 단어 외에도 문구를 입력할 수 있습니다. 목차Ⅰ. 자주 사용하는 색상 코드1. 버튼 링크2. 직접 사용하는 헥스 코드(ex. 웹사이트 그래프)3. 모든 RGB, HEX…

  • 카카오톡 다크모드 설정 방법 2가지(모바일&PC)

    웹 검색이나 앱(App) 사용을 할 때 눈의 피로감을 덜 하기 위해 다크모드 설정 후 사용을 많이 합니다. 다크 모드의 장점은 어두운 화면일 수록 방출되는 빛의 양이 줄어들어 눈의 피로감 역시 줄어듭니다. 다크모드는 전력 소비도 줄일 수 있어 휴대폰 사용 시 방전되는 기간을 늘릴 수 있습니다. 카카오톡 다크모드 설정 방법 모바일과 PC에 대해 하나…

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다

Prove your humanity: 9   +   5   =