LoveCSS logoLoveCSS

CSS Color Tools

Pick, convert, check and build color palettes and scales for the web.

Everything you need to choose and use color in CSS. Pick a color or pull one from an image, convert it between HEX, RGB, HSL and OKLCH, build a full color palette on the color wheel or a 50–950 tint scale, preview the result on real UI, and check every text and background pair against WCAG contrast rules before you ship.

Pick & Convert Colors

Find the exact color you want and get it in any CSS format.

Color Picker

Pick and copy any CSS color format.

Image Color Picker

Pick colors or extract a palette from an image.

#8B5CF6rgb(139,92,246)

CSS Color Converter

Convert between HEX, RGB, HSL and more.

tomatogoldtealrebeccapurple

CSS Color Names

Find any color's name and browse all 148 CSS named colors.

Palettes & Color Scales

Turn one color into a complete, consistent color system.

Color Palette Generator

Build color palettes on a color wheel.

Tints & Shades Generator

Build a 50–950 color scale from one color.

Palette Visualizer

Preview a color palette on real UI mockups.

Accessibility

Make sure your text stays readable for everyone.

AaAaAAA

Color Contrast Checker

Check WCAG contrast between two colors.

Browse the Gallery

Ready-made styles you can customize and open in these tools.

Color Palettes

Curated color palettes for websites, apps and brands.

Browse collection
How to Use & FAQ

How to Use the Color Tools

  1. 1Start with a color — pick one, enter a HEX value, or extract one from an image.
  2. 2Build a palette with the Palette Generator, or a 50–950 scale with Tints & Shades.
  3. 3Preview the palette on UI mockups with the Palette Visualizer.
  4. 4Check text and background pairs in the Contrast Checker, then copy the CSS variables.

Frequently Asked Questions

All of them work in every modern browser. HEX is the most common and compact; HSL and OKLCH are easier to adjust by hand because lightness is its own value. OKLCH also keeps perceived brightness consistent across hues, which makes it a good choice for color scales and design tokens.

WCAG 2.x level AA needs at least 4.5:1 for normal text and 3:1 for large text (24px, or 18.66px bold). Level AAA raises that to 7:1 and 4.5:1. The Contrast Checker shows the ratio and which levels a color pair passes.

Pick the brand color on the Color Palette Generator's color wheel (or type its HEX value) and choose a color harmony such as analogous, complementary or triadic. For lighter and darker versions of the same color, use the Tints & Shades Generator to create a 50–950 scale you can copy as CSS variables.

CSS defines 148 named colors, such as tomato, rebeccapurple and slategray, plus the special keywords transparent and currentColor. The CSS Color Names tool lists them all and finds the closest name for any color.

Yes. Every color tool is free with no sign-up, and the colors and CSS you copy are yours to use in any project.