b2KIT

Color Picker + HEX/RGB/HSL/CMYK

Pick colors visually and convert between HEX, RGB, HSL, and CMYK formats.

How to Use Color Picker + HEX/RGB/HSL/CMYK

  1. 1

    Pick a color

    Click the color wheel or enter a hex value to select your color.

  2. 2

    Adjust the format

    Switch between HEX, RGB, HSL, and other color formats.

  3. 3

    Copy the value

    Click the copy button to grab the color code for your project.

Tested tool guide Design and color tools Checked July 30, 2026

What Color Picker + HEX/RGB/HSL/CMYK does, with a checked example

This picker keeps several color notations synchronized. Change the visual picker, HEX value, RGB channels, HSL channels, or a simple CMYK conversion and the other values update. It also displays a complementary hue and chooses a readable black or white preview label using a brightness heuristic.

Worked example

A concrete input and expected output from the current implementation.

Input

#C49000

Expected output

RGB 196, 144, 0
HSL 44, 100%, 38%
CMYK 0%, 27%, 100%, 23%

The values describe the same sRGB color after rounding. The CMYK result is a mathematical conversion, not a printer-specific proof.

How the result is produced

1

All edits pass through RGB

HEX is parsed to red, green, and blue channels. HSL and CMYK-style inputs are converted back to RGB, which becomes the common state for the synchronized fields.

2

Complementary color rotates channels

The displayed complement is produced from inverse RGB channels. It is a quick visual counterpoint, not a guarantee of harmony or contrast compliance.

Good uses

  • Copy one color into several CSS or design-tool formats.
  • Explore how hue, saturation, and lightness affect RGB output.
  • Create a quick complementary starting point for a mockup.

Limits and checks

  • Generic CMYK math does not include an ICC printer profile.
  • Rounded conversions can move a channel by a small amount.
  • Use the dedicated contrast tool for accessibility decisions.

Common questions

Why does the CMYK value differ from printed output?

Real printing depends on inks, paper, press conditions, and an ICC profile. This page shows a device-independent mathematical approximation.

Can HSL represent every sRGB color?

Yes, as a coordinate transformation of sRGB values. HSL is often easier to edit by eye, but it is not perceptually uniform.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.

Related Tools

Print Color Preview

Preview how screen colors translate to print with CMYK simulation and proofing.

Font Preview Tool

Preview any Google Font at various sizes, weights, and with custom sample text.

CSS Gradient Generator

Create linear, radial, and conic CSS gradients with a visual editor and code output.

Color Palette Generator

Generate harmonious color palettes from a base color using color theory rules.

Color Blindness Simulator

Simulate how colors appear to people with various types of color vision deficiency.

Box Shadow CSS Generator

Design box shadows visually with multiple layers and copy the CSS code.