Skip to content
CrateX.app logo

CrateX.app

Color Converter

Color converter for HEX, RGB, HSL, and CMYK with live preview, color picker, and synchronized values for design handoff, CSS styling, and palette checks.

HEX

#

RGB

HSL

CMYK
Color Converter

Quick Start

1
Pick or input: type any supported format (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) or use a color picker
2
Auto conversion: entering any format updates all other formats instantly
3
Copy: use the copy button next to each format to get a standardized string

Common Scenarios

Design handoff

convert HEX from design files to CSS RGB/HSL for development

Style guide

unify color formats and writing style across a component library

Print reference

convert screen color to CMYK as a first estimate (proofing still required)

Accessibility

use preview for quick contrast sense (use a dedicated tool for precise ratios)

Conversion Parameters & Display

Input rules: HEX supports only 6 digits (no alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Input is case‑insensitive
Preview: desktop shows a live preview on the right; mobile runs a lightweight mode without preview
Color picker: click the palette button at the top‑right of each card to open the picker
HEX uppercase policy: output is normalized to uppercase (e.g. #1E90FF); input is case‑insensitive; no case toggle
Fine‑tune: drag channel letters left/right (Shift×10, Alt÷0.1)
Copy output: the copy button outputs standardized strings (HEX uppercase)

Usage Advice

Precision: device/display management varies; eyedropper values may differ slightly across apps
Alpha: current formats do not include alpha; use rgba()/hsla() or a separate alpha value
Color space: the web defaults to sRGB; verify carefully in P3/Display‑P3 workflows
Team consistency: agree on a canonical format in CSS (e.g. HSL)

Limitations & Compatibility

Device variance: different monitors/browsers/OS color‑manage differently; visuals may vary
CMYK is approximate: values are an estimate only; serious print work requires ICC profiles and workflow
No alpha: this tool does not process transparency

Privacy & Security

All processing happens locally in your browser. You can replace, clear, and re-run the current content at any time.

FAQ

5

Continue with these related tools for the next step.