직접 사용하는 색상 코드 & 색상 코드 추천 사이트 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

  • [WP] 올바른 워드프레스 플러그인 삭제 방법: 3가지 요소로 보기

    워드프레스 CMS가 전 세계 점유율의 43%를 차지할 수 있는 이유는 다양한 테마와 플러그인에 이유가 있습니다. 개발자들은 워드프레스 관리자의 수요에 맞게 플러그인을 만들며 워드프레스는 5만 여 개 이상의 플러그인이 만들어졌습니다. 목차Ⅰ. 자주 사용하는 색상 코드1. 버튼 링크2. 직접 사용하는 헥스 코드(ex. 웹사이트 그래프)3. 모든 RGB, HEX 목록Ⅱ. 색상 코드 조합 추천 사이트 TOP 31….

  • SSL 보안등급 확인 사이트

    내 웹사이트에 설정된 SSL 보안등급이 몇 등급인지 확인해 보도록 하겠다. SSL (Secure Sockets Layer)은 웹 콘텐츠, 이메일 또는 기타 유형의 정보를 전송하는 다른 상위 수준의 프로토콜을 통한 데이터 전송을 암호화하기 위한 네트워크 프로토콜이다. 오늘날 SSL 새로운 TLS (Transport Layer Security) 프로토콜 제품군으로 대체되었다. TLS는 클라이언트와 서버 간 네트워크로 통신 중 발생할 수 있는…

  • 인터넷 속도 측정 사이트 5개(무설치) 추천

    보통 가정에서 사용하는 Internet 상품은 100Mbps, 500Mbps, 1Gbps 상품 중 하나를 선택해서 사용하게 됩니다. 내가 사용하는 Internet 속도가 잘 나오는지 궁금할 때가 있습니다. 인터넷 속도 평균 Mbps 등을 디테일하게 체크할 필요가 있을 수 있습니다. 설치나 로그인 없이 평균 인터넷 속도 측정이 가능한 6군데를 사이트 5군데를 사이트 리뷰 해 보겠습니다. 목차Ⅰ. 자주 사용하는 색상…

  • 포털사이트1위: 네이버 사이트 등록 방법

    네이버 사이트 등록 방법에 대해 알아보겠습니다. 먼저 네이버 서치어드바이저에 접속해야 합니다. 목차Ⅰ. 자주 사용하는 색상 코드1. 버튼 링크2. 직접 사용하는 헥스 코드(ex. 웹사이트 그래프)3. 모든 RGB, HEX 목록Ⅱ. 색상 코드 조합 추천 사이트 TOP 31. Adobe Color2. Color hunt3. Color Space1. 네이버 사이트 등록 서치어드바이저 접속 후 이미 가입한 네이버 아이디로 로그인 합니다….

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

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

  • [GA4] 애널리틱스 기본 보고서와 라이브러리 활용 맞춤 보고서 만들기

    웹사이트와 앱 분석을 위한 GA4 보고서를 도입했지만 용어와 설정 방법 등에서 데이터 활용 방법을 어떻게 할지 고민할 수 있습니다. ‘GA4 애널리틱스 기본 보고서’의 유형에 대해 알아 보겠습니다. 목차Ⅰ. 자주 사용하는 색상 코드1. 버튼 링크2. 직접 사용하는 헥스 코드(ex. 웹사이트 그래프)3. 모든 RGB, HEX 목록Ⅱ. 색상 코드 조합 추천 사이트 TOP 31. Adobe Color2….

답글 남기기

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

Prove your humanity: 1   +   3   =