색상

글자/배경 대비를 WCAG AA·AAA 기준으로 검사하세요.

베이스 컬러 선택 → 클래식 색상환 하모니 — 보색·분할보색·삼색·사색·정사각·유사·단색.

선형·방사형 CSS 그라디언트를 다중 색상 스톱으로 디자인하고 코드를 복사하세요.

어떤 색이든 HEX·RGB·HSL·HSV·OKLCH·CSS 변수로 한 번에 변환.

여러 레이어로 CSS box-shadow를 디자인 — 실시간 미리보기 + CSS·Tailwind 출력.

8가지 색각 이상(CVD)에 따라 이미지가 어떻게 보이는지 시뮬레이션.

이미지를 드롭하면 Canvas로 주요 색을 분석해 팔레트 추출 — HEX 복사 또는 전체 일괄 복사.

blur·brightness·contrast·hue·sepia·invert 등 9개 필터 시각 조합 — CSS 또는 Tailwind 임의값으로 복사.

두 뷰포트 너비 사이를 부드럽게 스케일하는 `font-size: clamp(...)` 생성 — 한 줄 복사.

코너 독립 드래그, 타원 반지름, CSS 복사 — 채팅 버블·필·블랍·탭 프리셋 포함.

순수 CSS로 8방향 삼각형 — border 트릭 또는 clip-path, 규칙 복사 후 붙여넣기.

제어점을 드래그해 CSS 이징 곡선 설계 — 모션 미리보기, cubic-bezier() 값 복사.

두 색상을 RGB·HSL·CIELAB 공간에서 보간. 11단계 중간 그라데이션 스트립 표시.

기본 색에서 틴트(밝게)·셰이드(어둡게)·톤(회색 혼합) 생성. 2~20 단계, HEX·RGB·HSL 출력.

147개 CSS / X11 named color — HEX·RGB·실시간 스와치, 검색·색상 계열별 그룹화.

Hue·Saturation·Lightness·Alpha 슬라이더로 색 조정 — HEX·RGB·HSL·Tailwind 임의 값 복사.

전체 Tailwind CSS 기본 팔레트 — 22가지 색상 × 11단계 음영(50~950) — Tailwind 클래스·HEX·rgb()로 클릭 복사.

Kelvin 값 슬라이드 → 흑체 색이 따뜻한 호박색에서 중성 흰색·차가운 파랑으로 이동. 일반 광원 프리셋 포함.

두 색의 지각적 차이를 숫자로 — CIE76 ΔE·CIEDE2000 ΔE·일반 RGB 거리, 나란한 스와치.

hex 색상 리스트 붙여넣기 → 색조·채도·명도·체감 밝기 기준 정렬. 디자인 토큰 팔레트 정리에 유용.

지각적으로 균등한 OKLCH 공간(명도·채도·색조)에서 색 픽 — 각 픽이 sRGB 디스플레이 gamut 안에 들어가는지 표시.

두 헥스 컬러 → N개 이산 중간 스텝 — sRGB·linear RGB·OKLab·HSL — 옵션 이징.

컬러 팔레트 한 번 정의 → CSS 커스텀 프로퍼티·Tailwind 설정·SCSS·LESS·디자인 토큰 JSON·SwiftUI Color·Android `colors.xml`로 익스포트. 라이브 미리보기 스워치.

CSS `conic-gradient()` 비주얼 빌더 — 회전 각도·중심 위치·컬러 스톱·도형 미리보기. 파이 차트·링 차트·체커보드 패턴·컬러 휠에 유용.

임의의 hex/RGB 색상에 가장 가까운 CSS·Tailwind·XKCD 색상 이름을 OKLab 인지 거리 기준으로 정렬해 표시.

기준 색상 하나로 Material You / Material Design 3 토널 팔레트(톤 0–100)를 생성합니다. 흑백 대비비와 CSS/Tailwind/JSON/SCSS 내보내기 제공.

빛의 파장(380–780 nm 가시광)을 sRGB 근사 색으로 변환 — 클릭 가능한 무지개 그라데이션 바와 실제 태양 분광에서 가져온 프라운호퍼 흡수선 레퍼런스 포함.

화면용 RGB/hex 색상을 인쇄용 CMYK 퍼센트로 (또는 그 반대로) 변환합니다. Simple, GCR (그레이 성분 대체), UCR (언더컬러 제거) 블랙 생성 방식과 채널 분판 미리보기, 총 잉크 커버리지 표시를 지원합니다.

HSL 명도·HSV 값·WCAG 상대 휘도(LRV)·CIE Lab L*(지각 명도)·Rec. 709 루마·HSP 지각 밝기·단순 (R+G+B)/3 등 7 가지 밝기 척도를 한 색 또는 두 색에 대해 동시에 비교. '더 밝아 보여야 할' 색이 왜 더 어두워 보이는지 한눈에 확인합니다.

W3C 컴포지팅 표준의 16 가지 mix-blend-mode(multiply·screen·overlay·soft-light·hue·color·luminosity 등) 를 두 색에 적용한 결과를 한눈에 비교하고, 각 모드별 CSS 스니펫을 복사할 수 있습니다.

모던 CSS `color-mix()` 함수가 두 색을 보간 공간(srgb, hsl, oklch, lab, lch, hwb, oklab, srgb-linear)에 따라 어떻게 다르게 섞는지 한눈에 비교 — 실시간 스와치, 계산된 hex, 공간별 전체 그라데이션, 그리고 복사 가능한 CSS.

CSS `clip-path` 속성의 시각 빌더 — 도형 선택 (원, 타원, inset, 다각형), 슬라이더나 미리보기 클릭으로 다각형 점 추가, 붙여넣기 바로 가능한 CSS 선언 복사. 10가지 도형 프리셋 (삼각형, 육각형, 별, 화살표, 말풍선, 십자 등) 포함.

여러 text-shadow 레이어를 쌓아 네온 글로우·3D·아웃라인·롱섀도 효과 — 라이브 프리뷰 + 복사 가능 CSS.