WEB

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

Author:macbeth 등록일2025-10-13 05:552025-11-05 09:39 업데이트2025-11-05

0 Comments

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

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

TOC

1mn read

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

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

1. 버튼 링크

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

2. Color hunt

Color hunt

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

3. Color Space

Color Space

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

생성 전생성 후

ℹ️ 제휴 안내
본 사이트의 콘텐츠에는 제휴 링크가 포함되어 있습니다. 방문자가 이 링크를 통해 상품 또는 서비스를 구매하면 본 사이트는 판매처로부터 수수료를 지급받습니다. 이 과정에서 구매자가 지불하는 금액^{(이벤트 할인 시 금액이 내려갑니다↓)}은 오르지 않습니다. 게시된 가격·할인·재고 정보는 작성 시점 기준이며 실제와 다를 수 있으므로, 구매 전 판매처에서 최종 확인하시기 바랍니다. 상품 선정과 평가는 자체 기준에 따라 작성되며, 수수료 지급 여부가 소개 순서나 평가 내용에 영향을 주지 않습니다.

WEB

[Chrome] 크롬 개발자도구 실행과 한국어 변경 방법
Published:jarvis

구글에서 만든 크롬 브라우저는 개발을 도와주는 ‘크롬 개발자도구’가 있습니다. 개발자 도구(Developer tools)를 이용해서 HTML, CSS, JavaScript의 생산성을 높일 수 있습니다. 개발자를 위한 도구이지만 글자 크기, 색, 간격과 같은 값을 확인할 수도 있고 웹사이트의 속도를 PC뿐만 아닌 모바일 버전으로도 확인할 수 있는 장점이 있습니다. 1. 개발자모드 실행 방법 실행 방법은 2가지가 있습니다. 검수하려는 웹사이트에…
WEB

[Google] 크롬 홈 버튼 설정하는 방법
Published:wilson

구글 검색을 사용하기 위해 크롬 브라우저를 사용하는데 크롬 홈 버튼 설정이 되어 있지 않아 불편할 때가 있습니다. 개인적으로 홈 버튼 설정 시 우측 상단에 Gmail과 유튜브 및 구글 드라이브 등의 다양한 기능을 한번만 클릭해서 사용할 수 있기 때문에 홈 버튼 설정을 선호합니다. 개인적으로 다크 모드를 좋아하기 때문에 크롬 화면은 기본 다크 모드로 설정되어…
WEB

Breadcrumbs: 구조화된 네비게이션과 SEO를 위한 Schema
Published:jarvis

웹사이트의 콘텐츠가 많아지고 규모가 커질수록, 사용자는 자신이 어디에 있는지 헷갈리기 쉽고, 검색엔진은 페이지 간 구조적 관계를 파악하기 어려워집니다. 이와 같은 경우 장 강력한 해결책이 바로 Breadcrumbs입니다. 브레드크럼은 단순한 네비게이션 기능을 넘어서, 검색엔진 최적화(SEO)와 사용자 경험UX을 동시에 강화하는 중요한 도구입니다. 특히 Schema 마크업을 통해 구조화된 데이터를 제공하면, 구글과 같은 검색엔진은 사이트의 계층 구조를 더…
WEB

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

아웃룩 검색 기능은 메일을 보낸 사람, 내용, 아웃룩 작업과 일정 등 다양한 항목을 찾을 수 있는 기능입니다. 아웃룩 검색 방법은 [Ctrl+E] 단축키로 키워드를 입력하면 관련 항목을 찾을 수 있습니다. 검색하는 키워드는 단어 외에도 문구를 입력할 수 있습니다. 1. 아웃룩 검색 방법 [Ctrl+E]를 눌러 [Search Console]이란 검색어를 입력했습니다. 구글의 서치 콘솔에서 온 메일들을 확인할…
WEB

ERP란 무엇인가? | About 이카운트 ERP
Published:wilson

ERP는 “Enterprise Resource Planning”의 약어로, 기업 자원 계획이라는 의미를 가지고 있습니다. 전사적 자원 관리(ERP)는 재무, 회계, 자재 관리, 생산 관리, 인사 관리, 판매 및 마케팅 등의 다양한 비즈니스 프로세스를 통합하여 효율성을 극대화하는 소프트웨어 유형입니다. 전사적 자원 관리를 도입함으로써 생산·주문 섹터를 마케팅과 연동하여 실시간으로 조회하고 생산·주문 일정을 조율할 수 있어 보관 비용과 재고 관리에 발생하는…
WEB

[SEO] google 유용한 콘텐츠(업데이트 2022년 8월 25일)
Published:wilson

2022년 8월에 google 유용한 콘텐츠 업데이트는 검색엔진 용 콘텐츠를 먼저 설정하는 것이 아닌 사용자 중심 콘텐츠를 만드는 것에 집중할 수 있도록 하고 있습니다. 구글 자체 검색엔진 최적화 가이드 및 권장사항을 따르지 말아야 한다는 것이 아닌 사용자에게 초점이 맞춰진 콘텐츠 여부에 중점을 둔 것이라 할 수 있습니다. google 유용한 콘텐츠는 사용자 중심 기반 비즈니스…