Color tools
Pick, convert and check colors, and generate the CSS to use them. Convert with Color converter, OKLCH converter and HEX alpha converter; build palettes with Color palette generator, Palette from image and Tints and shades generator; check Contrast checker and Color blindness simulator. CSS generators include Gradient generator, Box shadow generator, Flexbox generator, CSS grid generator, Clip-path generator and Glassmorphism generator.
- Accessible color finderAdjust a text color just enough to meet WCAG AA or AAA contrast on a background.
- Border radius generatorSet each corner radius, in px or percent, see the shape and copy border-radius.
- Box shadow generatorBuild a layered box-shadow with a live preview and copy the CSS.
- Color averageAverage a list of colors three ways: sRGB, linear light and perceptual OKLab.
- Color blindness simulatorSee an image the way people with common types of color vision deficiency do.
- Contrast matrixCheck WCAG contrast between every pair of colors in a palette at once.
- Color converterConvert colors between HEX, RGB, HSL, HSV, CMYK and OKLCH, with copy buttons.
- Color distance calculatorDelta E between two colors by CIE76, CIE94 and CIEDE2000.
- Gradient stepsList the HEX colors that sit between two colors, in as many steps as you want.
- Color lighten and darkenLighten or darken a color by a percentage in HSL or OKLCH, with a five-step list.
- Color mixerBlend two colors and compare the sRGB and perceptual OKLab results.
- Color name finderFind the nearest CSS color name for any HEX, or look up the HEX of a name.
- Color palette generatorBuild a color scheme from one base color and export it as HEX codes or CSS variables.
- Screen color pickerPick a color from anywhere on screen and copy it as HEX, RGB or HSL.
- Color saturation adjusterIncrease or decrease a color's saturation in HSL or OKLCH with a five-step list.
- Color sorterPut a list of colors in order by hue, lightness, saturation or luminance.
- Kelvin to RGBTurn a Kelvin value into an approximate screen color and compare common light sources.
- Conic gradient generatorDesign a conic gradient with start angle, center and color stops, then copy the CSS.
- Contrast checkerFind the WCAG contrast ratio of two colors and see if it passes AA and AAA.
- Clip-path generatorCreate clip-path shapes, drag polygon points and copy the CSS.
- color-mix() builderBuild color-mix() code for any color space and see the resulting color.
- CSS color names listAll 148 CSS named colors with swatches, HEX codes, search and sorting.
- CSS filter generatorCombine CSS filter functions with sliders, preview them live and copy the CSS.
- CSS grid generatorDesign a CSS Grid with column and row sizes, gaps and item spans, then copy HTML and CSS.
- CSS triangle generatorGenerate CSS triangles in 8 directions, as border trick and as clip-path.
- Dark mode paletteCreate a dark version of a light palette and check its contrast on the dark background.
- Flexbox generatorPlay with flexbox properties on a live preview and copy the container and item CSS.
- Glassmorphism generatorCreate a frosted-glass card with backdrop-filter, preview it and copy the CSS.
- Gradient generatorDesign linear and radial CSS gradients with up to five stops and copy the code.
- Gradient text generatorFill text with a linear gradient and copy the CSS that does it.
- HEX alpha converterConvert #RRGGBBAA and #RGBA to rgba() and back, with alpha as a percent and a byte.
- Image color pickerPick colors from any image on your device and copy the HEX and RGB values.
- OKLCH converterConvert colors between OKLCH, OKLab, LCH, Lab, HEX, RGB and HSL in one step.
- Palette from imageFind the dominant colors of a photo or design: HEX list and CSS variables.
- Radial gradient generatorDesign a radial gradient with shape, size, center and color stops, then copy the CSS.
- Random gradient generatorRandom linear and radial CSS gradients, with a saved history.
- SVG wave generatorCreate smooth, layered SVG wave dividers, randomize them, and copy or download the code.
- Text shadow generatorDesign layered text shadows with live preview text and copy the CSS.
- Tints and shades generatorTurn one color into ten lighter and ten darker versions and copy them as a list or CSS.
- Web safe colors chartAll 216 web safe colors; click one to copy its code.