CSS 색상 코드 생성기이란?
모든 색상을 HEX, RGB, RGBA, HSL, HSLA, OKLCH, CSS 색상명 등 CSS에서 사용 가능한 모든 형식으로 변환하는 CSS 색상 코드 생성기입니다. 시각적으로 색상을 선택하거나 임의의 형식으로 입력하면 즉시 모든 형식을 얻을 수 있으며, WCAG 대비 검사도 함께 제공합니다.
16진수 코드를 입력하거나, 컬러 피커를 드래그하거나, RGB 슬라이더를 조정하거나, 이미 있는 rgb() 또는 hsl() 문자열을 붙여 넣을 수 있습니다. 다른 형식은 실시간으로 계산되며, 지각적으로 균일한 팔레트를 위한 OKLCH도 포함되고, W3C 목록의 147개 CSS 이름 있는 색상 중 가장 가까운 항목도 함께 표시됩니다. 알파 값은 불투명도를 100% 아래로 내릴 때만 rgba()와 hsla()에 나타납니다. 대비 패널은 흰 배경과 검은 배경에 대한 WCAG 비율을 보여 주어 그 색상이 글자로 읽기 좋은지 한눈에 알 수 있습니다.
사용 방법
- 시각적 색상 선택기를 사용하거나 지원되는 형식(HEX, RGB, HSL)으로 값을 직접 입력하세요.
- 모든 CSS 형식으로 동시에 표시된 색상을 확인하고, 각 형식마다 원클릭 복사 버튼을 활용하세요.
- 알파 슬라이더로 불투명도를 조정해 RGBA 및 HSLA 값을 얻은 후, 필요한 CSS 코드를 복사하세요.
사용 시기
- 디자이너가 준 HEX를 CSS 프레임워크가 요구하는 형식으로 변환할 때.
- 팔레트를 만들 때 HSL 값을 활용해 일관된 밝은 톤과 어두운 톤을 파생할 때.
- 오버레이, 그림자, 호버 상태에 쓰기 위해 브랜드 컬러에 투명도를 줄 때.
결과
프론트엔드 개발자가 브랜드 오렌지 #F97316을 선택하자 즉시 rgb(249, 115, 22), hsl(25, 95%, 53%) 등 모든 형식이 표시되어 스타일시트 전반에 걸쳐 일관되게 사용할 수 있었습니다.
자주 묻는 질문
- 이름 있는 색상 칸이 가끔 비어 있는 이유는?
- CSS에는 이름 있는 색상이 147개뿐이며 HEX 값이 그중 하나와 정확히 일치해야 합니다. 대부분의 브랜드 컬러는 두 이름 있는 색 사이에 들어가서 비어 있는 게 정상입니다. tomato나 steelblue 같은 표준색을 확인할 때 주로 쓰입니다.
- HEX나 RGB 대신 HSL을 쓰면 좋은 경우는?
- HSL은 수작업으로 조정하기 편합니다. 명도를 10 올리면 한 단계 밝아지고 색상을 30 더하면 색상환에서 한 칸 이동합니다. 색 스케일을 설계할 때 디자이너는 HSL을 선호합니다. RGB와 HEX는 최종 스타일시트에서 글자 수가 약간 짧습니다.
- 불투명도 슬라이더는 색을 바꾸나요, 투명도만 바꾸나요?
- 알파 채널만 바뀝니다. R, G, B 값은 그대로 유지됩니다. 그래서 rgba(255, 0, 0, 0.5)을 흰 배경 위에 올리면 분홍빛으로 보입니다. 동일한 빨강이 배경과 5대5로 섞이는 것입니다.
- 이 CSS 값들은 모든 브라우저에서 지원되나요?
- HEX, RGB, RGBA, HSL, HSLA와 이름 있는 색상은 IE11까지 거슬러 올라가 15년간 보편적으로 지원됩니다. OKLCH도 여기서 생성되며 최신인 것이라면 어디서나 — 2023년 이후의 Chrome, Firefox, Safari, Edge — 작동하므로, 아주 오래된 엔진을 대상으로 한다면 hex나 rgb() 대체값을 남겨 두세요.
- 웹사이트에서 본 색의 HEX를 어떻게 얻나요?
- 화면에서 추출을 눌러 스포이트를 열고 화면 어디든 원하는 픽셀——페이지, 이미지, 디자인 시안——을 클릭하면 그 색이 바로 불러와집니다. (스포이트는 Chrome, Edge, Opera에서 동작합니다. Safari나 Firefox에서는 운영체제의 화면 색상 추출기로 HEX를 가져와 HEX 칸에 붙여 넣으세요.) 어느 쪽이든 모든 등가 형식과 투명도를 적용한 변형을 한 번에 볼 수 있습니다.