Color tools
Convert HEX, RGB and HSL, build palettes and gradients, and check WCAG contrast — all the color tools for design work, right in the browser.
Popular color tools
HEX to RGB Converter
Convert HEX color codes to RGB values and view HSL values too.
HEX to HSL Converter
Convert HEX color codes to HSL color values.
Random Color Generator — HEX Color
Generate a random HEX color and view RGB/HSL values.
Color Picker — Color and Design Calculator
uses a browser color input to inspect HEX, RGB, and HSL values. Input is processed in your browser.
RGB to CMYK Converter — Color and Design Calculator
converts RGB colors to CMYK percentages. Input is processed in your browser.
Palette Generator — Color and Design Calculator
generates a harmonious palette from a base HEX color. Input is processed in your browser.
Gradient Generator — Color and Design Calculator
generates a CSS linear-gradient from two HEX colors. Input is processed in your browser.
Color Mixer — Color and Design Calculator
mixes two HEX colors by a chosen ratio. Input is processed in your browser.
Tint and Shade Generator — Color and Design Calculator
generates lighter tints and darker shades for a HEX color. Input is processed in your browser.
CSS Named Color Lookup — Color and Design Calculator
looks up HEX and RGB values for CSS named colors. Input is processed in your browser.
Tailwind Color Match — Color and Design Calculator
finds a close Tailwind default color token for a HEX color. Input is processed in your browser.
Opacity Color Calculator — Color and Design Calculator
converts a HEX color and opacity to CSS rgba. Input is processed in your browser.
Box-shadow Generator — Color and Design Calculator
generates CSS box-shadow from offsets, blur, spread, and color. Input is processed in your browser.
Border Radius Preview — Color and Design Calculator
builds CSS border-radius from four corner values. Input is processed in your browser.
CSS Clamp Generator — Color and Design Calculator
combines minimum, preferred, and maximum values into CSS clamp(). Input is processed in your browser.
REM PX Converter — Color and Design Calculator
converts between px and rem using a base font size. Input is processed in your browser.
Aspect Ratio Calculator — Color and Design Calculator
calculates CSS aspect-ratio from width and height. Input is processed in your browser.
Tailwind Color Generator — Design Generator
generates a 50-950 scale from a base color.
Palette Visualizer — Design Generator
visualizes a palette in generic UI blocks.
Color Name Finder — Design Generator
finds a nearby named color for a HEX value.
CSS Triangle Generator — Design Generator
generates CSS border triangle code.
Color Contrast Checker — WCAG AA/AAA
Calculate contrast ratio between foreground and background colors and check WCAG AA/AAA results.
Image Palette Extractor — Browser Color Analysis
extracts a representative HEX color palette from an image. Input is processed in your browser.
Color Blindness Simulator — Browser Color Analysis
simulates common color-vision deficiency types for a HEX color. Input is processed in your browser.
FAQ
How do I convert HEX to RGB?
Each HEX pair (RR, GG, BB) converts from hexadecimal to decimal to give the RGB channels. The converter works instantly in both directions.
What standard does the contrast checker use?
It computes WCAG contrast ratios: 4.5:1 for normal text and 3:1 for large text meet the AA level.
How can I use palette and gradient results?
Copy the generated color codes or CSS snippets straight into your design tool or stylesheet.
Are color values sent to a server?
No. All color calculations run in the browser and nothing is sent to a server.