색상 변환기

HEX, RGB, HSL 색상 코드를 변환하고 바로 공유할 수 있는 복사용 스니펫으로 정리하세요.

색상 입력
선택한 색상 #0EA5E9
공유 URL https://comutil.com/ko/color?preset=brand-token
지우기
팔레트 미리보기
권장 텍스트
#111827
브랜드 토큰 전달가 복사하기 쉬운 HEX, RGB, HSL 및 토큰 스니펫으로 정규화되었습니다.
공유할 프리셋 준비 완료 #0EA5E9

브랜드 토큰 전달가 복사하기 쉬운 HEX, RGB, HSL 및 토큰 스니펫으로 정규화되었습니다.

현재 입력 #0EA5E9
권장 텍스트 #111827
정규화된 출력
HEX
CSS, 브라우저 도구, 디자인 문서에 쓰기 좋은 간결한 형식입니다.
#0EA5E9
RGB
디자인 전달, 캔버스 작업, 이미지 도구에 맞는 정확한 채널 값입니다.
rgb(14, 165, 233)
HSL
색조, 채도, 명도를 각각 조정해야 할 때 편리합니다.
hsl(199, 89%, 48%)
R, G, B 채널
티켓, 스펙, 토큰에 넣기 좋은 순수 숫자 채널입니다.
14, 165, 233
가독성 컨텍스트

이 스와치에서는 작은 텍스트 대비를 가장 높이려면 어두운 텍스트를 사용하세요.

흰색 텍스트
#FFFFFF
2.77:1
미리보기 텍스트
Aa 본문 예시
일반 텍스트: 대비가 더 필요함
큰 텍스트: 대비가 더 필요함
어두운 텍스트
#111827
6.40:1
미리보기 텍스트
Aa 본문 예시
일반 텍스트: 통과
큰 텍스트: 통과
전달용 스니펫
CSS 변수
:root {
  --brand-accent: #0EA5E9;
  --brand-accent-rgb: 14 165 233;
}
디자인 토큰 JSON
{
  "color": {
    "accent": {
      "value": "#0EA5E9",
      "rgb": "14 165 233",
      "hsl": "hsl(199, 89%, 48%)"
    }
  }
}
인라인 스타일
background-color: #0EA5E9;
color: #111827;
예시 프리셋
브랜드 토큰 전달
#0EA5E9
기본 브랜드 스와치로 시작해 구현에 바로 쓸 CSS 또는 디자인 토큰 값을 복사하세요.
디자인 RGB 정리
#FF5733
디자인 노트에서 붙여 넣은 RGB 값을 HEX, HSL, 재사용 가능한 스니펫으로 정규화합니다.
UI 포인트 색상 점검
#7C3AED
버튼이나 배지에 적용하기 전에 포인트 색상을 빠른 가독성 안내와 함께 점검하세요.
색상 형식이란 무엇인가요?

웹에서 색상은 여러 형식으로 표현할 수 있습니다. HEX는 16진수 표기법(#RRGGBB), RGB는 빨강, 초록, 파랑 성분(0-255), HSL은 색조(0-360), 채도, 명도(0-100%)를 사용합니다. 각 형식은 디자인 작업이나 프로그래밍적 색상 조작 등 다양한 용도에 장점이 있습니다.

색상 형식 상세

HEX 색상은 RGB 값을 16진수로 인코딩합니다(채널당 0-255). RGB는 색상 강도를 직접 지정합니다(0-255). HSL은 색상(색조)과 강도(채도/명도)를 분리하여 색상 변형을 만들기 더 직관적입니다. 모든 형식은 동일한 1670만 색상을 표현할 수 있습니다.

주요 사용 사례
  • 디자인 도구 색상을 CSS로 변환
  • 색상 테마 및 팔레트 생성
  • 색상 밝기 및 채도 조정
  • 플랫폼 간 브랜드 색상 맞추기
  • 색상 대비 접근성 테스트
형식 비교
HEX #RRGGBB - 간결함, 광범위한 지원, 복사/붙여넣기 용이
RGB rgb(R, G, B) - 프로그래밍적 조작에 직관적
HSL hsl(H, S%, L%) - 성분 조정으로 변형 생성이 용이
자주 묻는 질문

RGB 대신 HSL을 언제 사용해야 하나요?

HSL은 단일 성분만 조정하여 색상 변형(밝게, 어둡게, 채도 높게/낮게)을 만들 때 더 좋습니다. RGB는 색상 혼합이나 이미지 처리 작업에 더 적합합니다.

HEX 약식 표기란 무엇인가요?

HEX 약식은 6자리 대신 3자리를 사용합니다(#RRGGBB 대신 #RGB). 각 숫자가 두 번 반복됩니다: #F00은 #FF0000(빨강)이 됩니다. 각 쌍이 동일한 숫자일 때만 작동합니다.