Pick colors, convert between spaces, build scales and check WCAG contrast.
Picking a color is easy; choosing one that works well in an interface is a different story. Here the color can come in four ways: typed (HEX, rgb(), hsl() or a CSS name), tuned with the HSL or HSB sliders, grabbed from the screen with the browser eyedropper (the button only shows up where that API exists) or sampled pixel by pixel from an image you open. From there the tool returns six copyable readings: HEX, RGB, HSL and OKLCH are ready to paste into CSS; HSB is the graphics-editor format and CMYK belongs to print, so both are flagged as not CSS. The scale tab generates steps 50 to 950 by holding hue and chroma and moving only lightness in OKLCH, which is how you build a design-token scale without light tints washing out and dark steps drifting to another hue. It also builds tints (mixed with white), shades (with black) and tones (with gray). In the contrast tab, the WCAG ratio against white and against black comes with a verdict per criterion, AA and AAA, for normal text, large text and components, not just two loose numbers. The colors you care about go into a palette saved in the browser itself and come out as CSS custom properties, SCSS variables or JSON.
The chosen color shows up as HEX (#RRGGBB, two hexadecimal digits per channel, #0EA5E9 maps to R=14, G=165, B=233), RGB (channels 0 to 255), HSL (hue, saturation and lightness), OKLCH (perceptual lightness, chroma and hue), HSB (the same hue with saturation and brightness, the graphics-editor format) and CMYK (cyan, magenta, yellow and key, from the print world).
Not all of them are CSS. HEX, RGB, HSL and OKLCH can be pasted straight into a stylesheet; HSB and CMYK do not exist as CSS functions, so the tool flags them, which avoids the classic mistake of pasting cmyk() into the browser and watching the rule get dropped.
Lightening and darkening in HSL usually disappoints: the same lightness change produces very different jumps in perceived brightness depending on the hue, so yellows and cyans wash out while blues go dark too early. OKLCH was designed so that equal steps in L map to similar steps in perceived lightness.
That is why steps 50 to 950 hold your color's hue and chroma and move only L, with chroma tapering at both ends. When a requested step falls outside what sRGB can reach, the tool reduces chroma until it fits instead of clipping channel by channel, which would keep the number but shift the hue on screen. The step closest to your color keeps the original value, untouched, and is marked as the base.
Tints, shades and tones follow the classic definitions and are built by direct mixing: a tint is the color with white, a shade is with black and a tone is with mid gray, handy when you want to desaturate without changing hue.
Contrast is computed with the WCAG formula: each channel is linearized, combined by luminance (0.2126·R + 0.7152·G + 0.0722·B), and the ratio comes out as (lighter + 0.05) / (darker + 0.05). It ranges from 1:1 (identical colors) to 21:1 (black on white).
The tool computes the ratio against white and against black and, for each one, says what it meets: 4.5:1 for normal text at AA, 7:1 for normal text at AAA, 3:1 for large text at AA and for interface components and icons, 4.5:1 for large text at AAA. Every criterion carries a pass or fail mark plus the matching words, never color alone, because an indicator that depends on telling green from red is exactly what an accessibility tool must not do.
The copied HEX feeds CSS, design-system tokens, design-to-code handoff and brand documentation; the scale exported as custom properties drops straight into the project :root, and the same set comes out as SCSS variables or JSON when the token pipeline expects another format.
On the accessibility side, a beautiful color is not the same as a legible one: beyond aiming for 4.5:1 for text, never communicate an important state (error, success, selection) by color alone, because people with low vision or color blindness may not tell it apart. Pair color with an icon, text or shape so you exclude no one.
Paste the code into your HTML and the tool shows up on your page, without J-Kit's navigation and ads. It still runs in the browser of whoever visits your site.
<iframe
src="https://jkit.tools/embed/en-US/color-picker"
width="100%"
height="600"
style="border:0"
loading="lazy"
title="Color Picker"
></iframe>These references help contextualize formulas, standards, APIs and limitations used on this page. They do not replace professional validation when a result has legal, financial, medical or operational impact.
Six, all copyable in one click: HEX, RGB, HSL, OKLCH, HSB and CMYK. The first four can be pasted straight into CSS; HSB is the graphics-editor format and CMYK is for print, so both are flagged as not CSS. They all describe the same color, just in different coordinate systems.
#14b8a6Everything runs in your browser: the image you open never leaves the device, and the saved palette stays on this machine only.