Skip to content

Free Color Tools for Web Developers

Free online color tools for web developers: color picker, palette generator, tints and shades, contrast checker, CSS color names, color families, web-safe colors and Tailwind and Bootstrap palettes.

Color tools

Color Picker & Converter (HEX, RGB, HSL, HSV, CMYK) Pick any color and convert it between HEX, RGB, HSL, HSV and CMYK. Grab colors from your screen, adjust hue, saturation, lightness and opacity, and copy CSS-ready values.
Color Palette Generator for Websites Generate harmonious five-color palettes from a base color using analogous, monochromatic, complementary, split, triadic and tetradic rules. Lock colors, share a link and export to CSS, SCSS, Tailwind or JSON.
Tints & Shades Generator (50–950 Color Scale) Turn one color into a Tailwind-style 50–950 color scale or into tints and shades in 5, 10 or 20% steps. Click to copy HEX values and export CSS variables, Tailwind theme, SCSS or JSON.
Color Contrast Checker (WCAG AA & AAA) Check the contrast ratio between text and background colors against WCAG 2 AA and AAA for normal text, large text and UI components, with a live preview and one-click suggestions for passing colors.
CSS Color Names: All 148 Named Colors with HEX Codes All 148 CSS named colors with HEX, RGB and HSL values. Search by name or HEX code, filter by color family, sort by hue or lightness and copy any value with one click.
Color Families: Color Codes by Color Group Browse colors by family: reds, oranges, yellows, greens, cyans, blues, purples, pinks, browns, grays, whites and blacks, with HEX codes and ready-made color combinations.
Popular Colors: Tailwind CSS and Bootstrap 5 Palettes The complete Tailwind CSS v3 color palette (22 colors, 50–950) and Bootstrap 5.3 color scales (100–900) with HEX codes. Click any shade to copy it.
Web Safe Colors: The 216-Color Palette The 216 web-safe colors with HEX codes, grouped by red value, plus a tool that finds the nearest web-safe color for any color.

These tools cover the color work that comes up in almost every front-end project: picking and converting a color, turning one brand color into a palette or a 50–950 scale, checking that text stays readable, and looking up color codes by name, family or framework. Everything runs in your browser, there is no sign-up, and every value can be copied with one click.

Create and convert colors

Look up color codes

  • CSS Color Names: all 148 named colors with HEX, RGB and HSL, searchable and sortable.
  • Color Families: reds, blues, greens and nine more families, each with color codes and ready-made combinations.
  • Popular Colors: the complete Tailwind CSS and Bootstrap 5 palettes.
  • Web Safe Colors: the 216-color web-safe palette and a nearest-color finder.

Pairs well with the component library

Every UI component on WebDevSnippets keeps its colors in a few CSS custom properties or utility classes. Pick colors here, paste the values into the component's CSS, and check the result with the contrast checker before you ship.