Color Tools

Picker: The large square is a saturation-value map at the current hue — left to right increases saturation, top to bottom decreases brightness. Click anywhere on it to pick color. The thin vertical bar on the right is the hue slider (0° to 360°) — slide it to change the base hue and the square redraws accordingly. The right side shows the picked color in HEX, RGB, and HSL formats — click any value to copy it.

Palette: The left color picker and right edit box store the same Base color — they are two-way synced (pick a color or type a hex value, both update each other). The five palette rows below are all derived from this Base color by rotating its hue around the color wheel: Complementary (hue +180°, strongest contrast), Triadic (+120° / +240°, balanced triad), Tetradic (+90° / +180° / +270°, rectangular four-color), Analogous (-30° / base / +30° / +60°, harmonious neighbors), and Split Complementary (+150° / +210°, softer than pure complementary). The first swatch in every row is always the Base color itself, and the rest are its hue-rotated variants.

Convert: Enter any valid color — HEX (#3b82f6), CSS function (rgb(59,130,246) / hsl(217,90%,60%)), or named color (dodgerblue) — and get instant conversion to all major formats. The format dropdown optionally hints the parser if auto-detect picks the wrong format. Output shows HEX, RGB (0-255), HSL (degrees, %, %), HSV, and CMYK. Click any value to copy it.

Blindness: Upload an image and select a color vision deficiency type to simulate. The tool applies a cone-response matrix transformation to every pixel, remapping RGB values to approximate how people with different forms of color blindness perceive the image. The left canvas shows the original, the right shows the simulated view. The dropdown covers three dichromacy types (missing one cone pigment: protanopia, deuteranopia, tritanopia), complete achromatopsia (no color vision), and three anomalous trichromacy types (weak cone response). Lower resolution images load faster.

Gradient: This is a visual CSS gradient builder. Choose linear (directional) or radial (from center outward), set the angle (0° = bottom-to-top, 90° = left-to-right), and define color stops. Each stop has a color picker and is evenly spaced (0%, 50%, 100% for three stops). Click + Stop to add intermediate color points for more complex gradients. The preview updates live, and the generated CSS is ready to copy below.

Contrast: Calculates the WCAG 2.1 contrast ratio between foreground text and background color using the relative luminance formula from sRGB values (gamma-corrected). The ratio ranges from 1:1 (identical colors) to 21:1 (black vs white). Results show pass/fail at three compliance levels: AA Normal Text (ratio ≥ 4.5:1), AAA Large Text (ratio ≥ 4.5:1 for text ≥ 18pt or bold ≥ 14pt), and AAA Normal Text (ratio ≥ 7:1). The sample text preview updates in real time as you adjust colors.

Extract: Upload any image and the tool identifies its dominant color palette using color quantization. The image is downscaled to 100×100px, then each pixel is binned into a 4-bit-per-channel histogram (16 levels per R/G/B = 4096 bins). Transparent pixels are skipped. The most frequent bins are sorted by pixel count, and the center color of each bin becomes a swatch. Each swatch shows its HEX value and the percentage of image pixels it represents. Adjust the count slider (2-12) to control how many dominant colors are extracted.

Mixer: Blends two colors in RGB color space by linear interpolation. The ratio slider determines the mix: 0% is pure Color 1, 100% is pure Color 2, and 50% is an even blend. Each R, G, B channel is interpolated independently (e.g. red + blue at 50% gives purple). The result preview and HEX/RGB values update live as you drag the slider or change either color.

Temp: Converts blackbody color temperature in Kelvin to the corresponding visible color using Tanner Helland's approximation algorithm. Lower temperatures (1000-3000K) produce warm orange/red tones like candlelight and incandescent bulbs; mid-range (4000-6500K) yields neutral white to daylight; higher temperatures (8000-40000K) shift to cool blue like overcast sky and deep water. The label below identifies the nearest real-world light source for each temperature.

Named: Browse a combined collection of 80 Chinese traditional colors (胭脂, 朱砂, 黛蓝, etc. — names drawn from classical Chinese literature, painting, and dyeing traditions) and 140+ CSS named colors (the standard web palette). Use the search box to filter by name or HEX value, or switch between categories with the dropdown. Click any color chip to see a large preview with the name and HEX code — click the code to copy it.