Color Converter

Bee Tools' free color converter. Convert HEX, RGB, HSL, HSV and CMYK live, with a picker, 10-step brightness scale and complementary/triadic/analog color palettes.

Live conversion between HEX, RGB, HSL, HSV and CMYK with scales and palettes. Bee Tools' color converter runs on native JavaScript. Paste any of the five formats and see the rest update instantly, plus a 10-step brightness scale and complementary/triadic/analog palettes — ideal for UI design, frontend tokens and print work.

Lightness scale
Related palettes
Complementary
Triadic 1
Triadic 2
Analog

Complete guide to color spaces

Five color spaces compared

  • HEX — the CSS default. #RRGGBB expresses 24-bit color.
  • RGB — additive primaries. The screen model, easy to compute.
  • HSL — Hue, Saturation, Lightness. Great for adjusting brightness and saturation.
  • HSV — Hue, Saturation, Value. The default in Photoshop's picker.
  • CMYK — Cyan, Magenta, Yellow, Key(black). Subtractive mixing, reference for print output.

Typical conversion scenarios

  1. Design → frontend: HEX → RGB / HSL for Tailwind or CSS variables.
  2. Brand palette: HSL generates a full lightness ramp from a single hue.
  3. Print material: convert screen RGB to CMYK and match against a proof.
  4. Palette design: adjust HSL hue by ±30° / ±120° / ±180° for analog, triadic and complementary colors.

Pro tips

  • Aim for 45–55% lightness on brand primaries — it makes generating a 100–900 palette easier.
  • Text on backgrounds should meet WCAG 4.5:1 contrast; iterate with the brightness scale.
  • 6-digit HEX cannot describe wide gamut. For Display P3 / Rec.2020 devices, use CSS Color 4 syntax color(display-p3 ...).
  • Always re-check CMYK output in professional software before printing — this tool uses an sRGB math model.

About this tool

Bee Tools' color converter runs entirely in your browser. Input from the picker, HEX, RGB, HSL or HSV, and get a synchronized 10-step brightness scale plus four palette relationships. Nothing is uploaded, works offline.

Open-source notice: Color conversion logic is a native-JavaScript implementation by this project, released under the MIT License, with no third-party runtime dependencies.

FAQs

Which color formats are supported?
HEX (#RRGGBB / #RGB), RGB, HSL, HSV and CMYK — the five most common color spaces, updated in real time.
How precise are the results?
RGB uses 0–255 integers, HSL/HSV use percentages, and CMYK uses 0–100 integers rounded to the nearest whole number — matching mainstream design software.
Is any color data uploaded?
No. All conversion runs locally in your browser. Values never leave your device.
Why does HEX → CMYK → HEX not match the original?
RGB and CMYK gamuts differ. Screen (RGB) covers more colors than print (CMYK); out-of-gamut colors are mapped on conversion. This is expected behaviour.
What are complementary, triadic and analog colors?
Complementary = 180° apart (high contrast). Triadic = three colors 120° apart (balanced). Analog = ~30° apart (harmonious).
How do I use the generated brightness scale?
It splits the current hue into 10 lightness steps (10%–100%), perfect for building UI palettes or Tailwind color tokens.
Are alpha channels supported?
This version focuses on opaque color spaces. For RGBA/HSLA, append the alpha value manually after the RGB/HSL output.