색상 도구
어울리는 색과 읽히는 색
— 감이 아니라 규칙으로 고르세요
계산은 전부 브라우저 안에서 끝납니다. 회원가입도 저장도 없습니다.
팔레트
접근성
변환
색상 이름 110가지 — hex·RGB·대비
색 이름으로 hex 코드를 찾고, RGB·HSL·CMYK 값과 글자 대비, 보색과 명도 단계까지 한 화면에서 확인하세요
빨강 계열
빨강#FF0000
크림슨#DC143C
스칼릿#FF2400
루비색#9B111E
체리색#D2042D
장미색#FF007F
적갈색#800000
버건디#800020
벽돌색#CB4154
주홍#E34234
산호색#FF7F50
연어색#FA8072
카민#960018
카디널 레드#C41E3A
와인색#722F37
핏빛#660000
아마란스#E52B50
옥스블러드#4A0000
주황 계열
주황#FFA500
감귤색#F28500
살구색#FBCEB1
호박색#FFBF00
복숭아색#FFDAB9
당근색#ED9121
호박주황#FF7518
녹슨색#B7410E
테라코타#E2725B
메리골드#EAA221
선셋 오렌지#FD5E53
사프란색#F4C430
파파야색#FFEFD5
황토색#CC7722
노랑 계열
노랑#FFFF00
금색#FFD700
레몬색#FFF700
머스터드#FFDB58
크림색#FFFDD0
아이보리#FFFFF0
카키#F0E68C
벌꿀색#EB9605
옥수수색#FBEC5D
카나리아색#FFFF99
시트론#E4D00A
수선화색#FFFF31
아마빛#EEDC82
밀빛#F5DEB3
토파즈#FFC87C
초록 계열
초록#008000
라임#00FF00
올리브#808000
에메랄드#50C878
민트#98FF98
옥색#00A86B
숲녹색#228B22
세이지#9CAF88
이끼색#8A9A5B
청록#008080
터콰이즈#40E0D0
피스타치오#93C572
아보카도#568203
봄녹색#00FF7F
펀 그린#4F7942
셀라돈#ACE1AF
말라카이트#0BDA51
국방색#6B8E23
바다거품색#93E9BE
헌터그린#355E3B
샤르트뢰즈#7FFF00
비리디언#40826D
녹청#43B3AE
페리도트#B0BF1A
파랑 계열
파랑#0000FF
남색#000080
하늘색#87CEEB
애저#007FFF
코발트#0047AB
사파이어#0F52BA
세룰리안#007BA7
인디고#4B0082
데님#1560BD
스틸블루#4682B4
파우더블루#B0E0E6
로열블루#4169E1
한밤색#191970
아쿠아마린#7FFFD4
시안#00FFFF
페리윙클#CCCCFF
콘플라워 블루#6495ED
카뎃 블루#5F9EA0
에어포스 블루#5D8AA8
프러시안블루#003153
울트라마린#3F00FF
베이비블루#89CFF0
보라 계열
보라#800080
바이올렛#EE82EE
라벤더#E6E6FA
라일락#C8A2C8
자두색#8E4585
오키드#DA70D6
자수정색#9966CC
모브#E0B0FF
가지색#614051
포도색#6F2DA8
등나무색#C9A0DC
비잔티움#702963
로열 퍼플#7851A9
시슬#D8BFD8
붓꽃색#5A4FCF
헬리오트로프#DF73FF
퓨스#A95C68
오디색#70193D
분홍 계열
분홍#FFC0CB
핫핑크#FF69B4
블러시#DE5D83
마젠타#FF00FF
작약색#ED5B84
풍선껌색#FFC1CC
연분홍#FFB7C5
수박색#FC6C85
라즈베리#E30B5C
로즈 쿼츠#F7CAC9
플라밍고#FC8EAC
푸크시아핑크#FF77FF
카네이션색#FFA6C9
판당고#B53389
갈색 계열
갈색#A52A2A
초콜릿색#7B3F00
커피색#6F4E37
캐러멜#C68E17
황갈색#D2B48C
베이지#F5F5DC
카멜#C19A6B
호두색#773F1A
세피아#704214
모래색#C2B280
밤색#954535
러셋#80461B
마호가니#C04000
번트엄버#8A3324
시에나#A0522D
무채색
검정#000000
흰색#FFFFFF
회색#808080
은색#C0C0C0
숯색#36454F
슬레이트#708090
재색#B2BEB5
연무색#F5F5F5
진주색#EAE0C8
눈색#FFFAFA
흑연색#41424C
토프#483C32
게인즈버러#DCDCDC
제트 블랙#343434
본색#E3DAC9
오닉스#353839
에크뤼#CDB891
그레이지#BEBDB8
금속색
청동색#CD7F32
구리색#B87333
황동색#B5A642
백금색#E5E4E2
로즈골드#B76E79
건메탈#2A3439
스틸#71797E
티타늄#878681
이럴 때 쓰세요
- 🎨 브랜드 색을 정했을 때 — 명도 단계와 어울리는 보조색을 한 번에 만듭니다
- 👁️ 글씨가 안 읽힐 때 — 대비를 재고 색상은 그대로 둔 채 밝기만 맞춥니다
- 👓 색으로 상태를 구분할 때 — 색약자에게도 구분되는지 확인하세요
- 💻 CSS를 쓸 때 — 그라디언트와 그림자 코드를 눈으로 보며 가져갑니다
자주 묻는 질문
Q왜 화면마다 색이 다르게 보이나요?
모니터마다 표현할 수 있는 색 범위와 보정 상태가 다르기 때문입니다. 같은 HEX 값이라도 기기에 따라 다르게 보이므로, 인쇄물이나 정확한 색이 중요한 작업은 보정된 화면에서 확인해야 합니다.
Q어떤 색부터 정하는 게 좋나요?
주인공 색 하나를 먼저 정하고 나머지를 규칙으로 파생시키는 편이 실패가 적습니다. 명도 단계 생성으로 그 색의 밝기 단계를 만들고, 팔레트 생성기로 보조색을 뽑으면 한 세트가 나옵니다.
Q접근성 기준은 꼭 지켜야 하나요?
법으로 강제되는 곳도 있고(공공기관 웹), 그렇지 않더라도 대비가 낮으면 밝은 야외에서 아무도 못 읽습니다. 본문은 4.5:1을 넘기는 것을 기본으로 삼으세요.
Q입력한 색이 저장되나요?
아닙니다. 모든 계산이 브라우저 안에서 끝나고 서버로 전송되는 값이 없습니다.
모든 계산은 브라우저에서만 이루어집니다 · 무료 · 회원가입 없음