색상 변환기: HEX ↔ RGB ↔ HSL ↔ HSV 색상 코드 즉시 변환
O
OIYO 편집부기여자
색상 변환기
디자인 작업에서 Figma는 HEX, CSS는 RGB, 포토샵은 HSB(HSV)를 기본으로 표시합니다. 각 도구와 코드 간 색상 코드를 즉시 변환합니다.
색상 변환기
HEX · RGB · HSL · HSV · CMYK
CSS 이름:gray#6366F1
HEX
RGB
HSL
HSV
CMYK
RGB 슬라이더
R99
G102
B241
최근 색상
최근 색상 없음
색상 표현 방식 비교
| 방식 | 형식 예시 | 주요 사용처 |
|---|---|---|
| HEX | #FF5733 | HTML·CSS·디자인 툴 |
| RGB | rgb(255, 87, 51) | CSS, 웹 개발 |
| RGBA | rgba(255, 87, 51, 0.8) | CSS 투명도 포함 |
| HSL | hsl(11°, 100%, 60%) | CSS, 색조 조정 |
| HSV/HSB | hsv(11°, 80%, 100%) | Adobe 포토샵·일러 |
| CMYK | C:0 M:66 Y:80 K:0 | 인쇄물 색상 |
HEX 단축 표기: #RRGGBB에서 각 쌍이 같은 문자면 3자리로 줄일 수 있습니다. 예: #FFFFFF → #FFF, #336699 → #369.
자주 쓰는 색상 참조
| 색상 | HEX | RGB |
|---|---|---|
| 순수 흰색 | #FFFFFF | 255, 255, 255 |
| 순수 검정 | #000000 | 0, 0, 0 |
| 빨강 | #FF0000 | 255, 0, 0 |
| 초록 | #00FF00 | 0, 255, 0 |
| 파랑 | #0000FF | 0, 0, 255 |
| 회색 50% | #808080 | 128, 128, 128 |
HSL 이해하기
- H (Hue, 색조): 0–360°, 빨강(0°) → 초록(120°) → 파랑(240°) → 빨강(360°)
- S (Saturation, 채도): 0%(무채색) → 100%(선명)
- L (Lightness, 명도): 0%(검정) → 50%(순수 색상) → 100%(흰색)
HSL은 색상을 직관적으로 조정할 때 특히 유용합니다.
관련 도구: 개발자 유틸리티 모음 · UUID 생성기
O
OIYO 편집부
편집부OIYO 편집부는 경제·법률·생활·자기이해 주제를 1차 자료와 공개 통계로 검증해 정리합니다. 모든 글은 출처 표기와 정기 점검을 거쳐 실용성과 정확성을 함께 유지합니다.