Colors Encyclopedia

Color platform for designers & developers

Colors Encyclopedia Tools

Professional CSS color tools for designers and developers. Explore, create, check, convert, and export color with free professional CSS tools for designers and front-end developers. No sign-up required.

Start with a colorBrowse toolsTools API

Start with your color

Choose a color. Pick what you want to make.

We will open the selected tool with your HEX value already applied.

15interactive tools
5focused areas
40,000HEX records connected
4export formats

Create

Build color systems and visual effects

Start from a color and turn it into gradients, scales, surfaces, typography, borders, and reusable CSS.

generatorCSS Gradient StudioDesign linear, radial, and conic gradients with editable color stops, live preview, presets, and shareable CSS.Open tool generatorPalette & Token StudioGenerate an accessible 50–950 color scale and export it as CSS variables, SCSS, JSON, or Tailwind tokens.Open tool generatorGlassmorphism StudioTune blur, transparency, borders, radius, and shadow for accessible glass UI surfaces.Open tool generatorText Gradient GeneratorCreate editable gradient text and copy the complete background-clip CSS recipe.Open tool generatorBorder Gradient GeneratorDesign gradient borders with controllable colors, angle, width, and radius.Open tool generatorCSS Pattern GeneratorGenerate dots, grids, stripes, and checker backgrounds using CSS only.Open tool

Develop

Generate production-ready CSS while you work

Tune common interface effects visually, then copy clean code into a component, stylesheet, or design system.

generatorCSS Color MixerMix two colors visually and copy a modern color-mix() declaration with a HEX fallback.Open tool generatorBox Shadow StudioBuild single or layered CSS shadows with a live component preview and copy-ready code.Open tool generatorCSS Filter GeneratorAdjust blur, brightness, contrast, saturation, hue, and more with a live image preview.Open tool converterHEX to RGBConvert HEX color values into RGB channel triplets for CSS, canvas, and design tooling.Open tool

Accessibility

Choose color combinations with evidence

Check WCAG contrast, discover readable foregrounds, and explore colors with safe black or white text options.

checkerWCAG Contrast CheckerCheck foreground and background color pairs against WCAG AA and AAA thresholds.Open tool indexAccessible Colors IndexBrowse named colors with at least one WCAG AA text option, grouped by color family.Open tool

Explore & convert

Inspect color data from HEX to HSL and CMYK

Move between color formats, filter the editorial catalog, and open permanent records from the 40,000-route HEX atlas.

filterColor ExplorerFilter 500 editorial colors by family, tone, temperature, luminance, saturation, popularity, tags, and WCAG support.Open tool inspectorHEX Atlas ExplorerInspect any HEX value and generate RGB, HSL, CMYK, contrast, harmonies, variants, and nearest named colors.Open tool converterRGB to HSLConvert RGB values into HSL hue, saturation, and lightness for palette generation and UI theming.Open tool converterHSL to CMYKConvert HSL values through RGB into approximate CMYK values for print-aware references.Open tool

Built for real workflows

One color platform, different ways to work

🎨

For designers

Create palettes, gradients, glass surfaces, typography, and borders while keeping every decision connected to exact color data.

Creation tools
⌨

For front-end developers

Generate CSS, variables, Tailwind-ready tokens, fallbacks, filters, shadows, and patterns without leaving the browser.

Developer tools
◉

For accessibility work

Measure contrast, identify readable text colors, and move directly into the WCAG records behind each recommendation.

Accessibility tools

Dataset & AI

Every visual workflow sits on structured color data

Use static JSON endpoints for colors, tools, palettes, HEX records, accessibility, and generated resources. No API key is required for public read access.

Explore the API HubDataset manifestTools API JSON

Complete Tools Directory

Browse every interactive tool, converter, index, and developer resource by its technical task group.

Exploration Tools2 tools

Use these tools when you need to find, inspect, or filter colors without browsing thousands of static routes.

Color ExplorerFilter 500 editorial colors by family, tone, temperature, luminance, saturation, popularity, tags, and WCAG support./color-explorerHEX Atlas ExplorerInspect any HEX value and generate RGB, HSL, CMYK, contrast, harmonies, variants, and nearest named colors./hex
Accessibility Tools2 tools

Use these tools when contrast, readable text, UI states, badges, labels, and WCAG AA/AAA checks matter.

WCAG Contrast CheckerCheck foreground and background color pairs against WCAG AA and AAA thresholds./tools/contrast-checkerAccessible Colors IndexBrowse named colors with at least one WCAG AA text option, grouped by color family./wcag/accessible-colors
Conversion Tools3 tools

Use these tools when a color needs to move between web, design, and print-oriented color systems.

HEX to RGBConvert HEX color values into RGB channel triplets for CSS, canvas, and design tooling./convert/hex-to-rgbRGB to HSLConvert RGB values into HSL hue, saturation, and lightness for palette generation and UI theming./convert/rgb-to-hslHSL to CMYKConvert HSL values through RGB into approximate CMYK values for print-aware references./convert/hsl-to-cmyk
CSS Design Tools9 tools

Build production-ready visual effects with a live preview, editable controls, shareable state, and copy-ready CSS.

CSS Gradient StudioDesign linear, radial, and conic gradients with editable color stops, live preview, presets, and shareable CSS./tools/css-gradient-generatorPalette & Token StudioGenerate an accessible 50–950 color scale and export it as CSS variables, SCSS, JSON, or Tailwind tokens./tools/color-palette-generatorCSS Color MixerMix two colors visually and copy a modern color-mix() declaration with a HEX fallback./tools/css-color-mixerBox Shadow StudioBuild single or layered CSS shadows with a live component preview and copy-ready code./tools/box-shadow-generatorGlassmorphism StudioTune blur, transparency, borders, radius, and shadow for accessible glass UI surfaces./tools/glassmorphism-generatorText Gradient GeneratorCreate editable gradient text and copy the complete background-clip CSS recipe./tools/text-gradient-generatorBorder Gradient GeneratorDesign gradient borders with controllable colors, angle, width, and radius./tools/border-gradient-generatorCSS Pattern GeneratorGenerate dots, grids, stripes, and checker backgrounds using CSS only./tools/css-background-pattern-generatorCSS Filter GeneratorAdjust blur, brightness, contrast, saturation, hue, and more with a live image preview./tools/css-filter-generator
Dataset Tools2 tools

Use these entry points when the site is treated as a static AI-ready color dataset rather than a visual catalog.

API HubOpen static JSON endpoints for colors, HEX atlas records, palettes, harmonies, comparisons, brands, WCAG, and CSS utilities./apiDataset ManifestReview dataset version, route counts, API families, crawler guidelines, changelog, and build integrity resources./dataset

Machine-readable data

Machine-Readable Color Tools Index (JSON)

Structured catalog of color tools, categories, use cases, URLs, and API endpoints for developers and AI systems.

AI-Ready Dataset v1.0.0
hubCanonical tools hub identifier
groupsTool groups with descriptions and URLs
countTotal tools listed in this hub
semanticGroupsAI-readable tool taxonomy labels
relatedEndpointsMachine-readable API and manifest links
Download JSON Open API
Structured sections
Tool counts
{
  "count": 18,
  "interactiveCount": 15,
  "resourceCount": 3
}
Tool groups
[
  {
    "key": "exploration",
    "label": "Exploration Tools",
    "description": "Use these tools when you need to find, inspect, or filter colors without browsing thousands of static routes.",
    "count": 2,
    "tools": [
      {
        "url": "https://www.colorsencyclopedia.com/color-explorer/",
        "name": "Color Explorer",
        "type": "filter",
        "description": "Filter 500 editorial colors by family, tone, temperature, luminance, saturation, popularity, tags, and WCAG support.",
        "useCases": [
          "color discovery",
          "taxonomy filtering",
          "WCAG filtering"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/hex/",
        "name": "HEX Atlas Explorer",
        "type": "inspector",
        "description": "Inspect any HEX value and generate RGB, HSL, CMYK, contrast, harmonies, variants, and nearest named colors.",
        "useCases": [
          "HEX lookup",
          "technical conversion",
          "nearest color discovery"
        ]
      }
    ]
  },
  {
    "key": "accessibility",
    "label": "Accessibility Tools",
    "description": "Use these tools when contrast, readable text, UI states, badges, labels, and WCAG AA/AAA checks matter.",
    "count": 2,
    "tools": [
      {
        "url": "https://www.colorsencyclopedia.com/tools/contrast-checker/",
        "name": "WCAG Contrast Checker",
        "type": "checker",
        "description": "Check foreground and background color pairs against WCAG AA and AAA thresholds.",
        "useCases": [
          "contrast testing",
          "accessible UI",
          "text safety"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/wcag/accessible-colors/",
        "name": "Accessible Colors Index",
        "type": "index",
        "description": "Browse named colors with at least one WCAG AA text option, grouped by color family.",
        "useCases": [
          "safe colors",
          "AA/AAA selection",
          "accessible palettes"
        ]
      }
    ]
  },
  {
    "key": "conversion",
    "label": "Conversion Tools",
    "description": "Use these tools when a color needs to move between web, design, and print-oriented color systems.",
    "count": 3,
    "tools": [
      {
        "url": "https://www.colorsencyclopedia.com/convert/hex-to-rgb/",
        "name": "HEX to RGB",
        "type": "converter",
        "description": "Convert HEX color values into RGB channel triplets for CSS, canvas, and design tooling.",
        "useCases": [
          "CSS values",
          "RGB tokens",
          "developer handoff"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/convert/rgb-to-hsl/",
        "name": "RGB to HSL",
        "type": "converter",
        "description": "Convert RGB values into HSL hue, saturation, and lightness for palette generation and UI theming.",
        "useCases": [
          "theme generation",
          "hue analysis",
          "CSS hsl()"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/convert/hsl-to-cmyk/",
        "name": "HSL to CMYK",
        "type": "converter",
        "description": "Convert HSL values through RGB into approximate CMYK values for print-aware references.",
        "useCases": [
          "print approximation",
          "CMYK lookup",
          "design notes"
        ]
      }
    ]
  },
  {
    "key": "css-design",
    "label": "CSS Design Tools",
    "description": "Build production-ready visual effects with a live preview, editable controls, shareable state, and copy-ready CSS.",
    "count": 9,
    "tools": [
      {
        "url": "https://www.colorsencyclopedia.com/tools/css-gradient-generator/",
        "name": "CSS Gradient Studio",
        "type": "generator",
        "description": "Design linear, radial, and conic gradients with editable color stops, live preview, presets, and shareable CSS.",
        "useCases": [
          "CSS backgrounds",
          "UI design",
          "gradient tokens"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/color-palette-generator/",
        "name": "Palette & Token Studio",
        "type": "generator",
        "description": "Generate an accessible 50–950 color scale and export it as CSS variables, SCSS, JSON, or Tailwind tokens.",
        "useCases": [
          "design systems",
          "color scales",
          "CSS tokens"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/css-color-mixer/",
        "name": "CSS Color Mixer",
        "type": "generator",
        "description": "Mix two colors visually and copy a modern color-mix() declaration with a HEX fallback.",
        "useCases": [
          "color mixing",
          "hover states",
          "CSS color-mix"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/box-shadow-generator/",
        "name": "Box Shadow Studio",
        "type": "generator",
        "description": "Build single or layered CSS shadows with a live component preview and copy-ready code.",
        "useCases": [
          "box shadows",
          "UI elevation",
          "cards"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/glassmorphism-generator/",
        "name": "Glassmorphism Studio",
        "type": "generator",
        "description": "Tune blur, transparency, borders, radius, and shadow for accessible glass UI surfaces.",
        "useCases": [
          "glass UI",
          "backdrop blur",
          "overlays"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/text-gradient-generator/",
        "name": "Text Gradient Generator",
        "type": "generator",
        "description": "Create editable gradient text and copy the complete background-clip CSS recipe.",
        "useCases": [
          "gradient text",
          "headings",
          "display type"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/border-gradient-generator/",
        "name": "Border Gradient Generator",
        "type": "generator",
        "description": "Design gradient borders with controllable colors, angle, width, and radius.",
        "useCases": [
          "gradient borders",
          "cards",
          "buttons"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/css-background-pattern-generator/",
        "name": "CSS Pattern Generator",
        "type": "generator",
        "description": "Generate dots, grids, stripes, and checker backgrounds using CSS only.",
        "useCases": [
          "CSS patterns",
          "backgrounds",
          "decorative surfaces"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/tools/css-filter-generator/",
        "name": "CSS Filter Generator",
        "type": "generator",
        "description": "Adjust blur, brightness, contrast, saturation, hue, and more with a live image preview.",
        "useCases": [
          "CSS filters",
          "image effects",
          "hover treatments"
        ]
      }
    ]
  },
  {
    "key": "dataset",
    "label": "Dataset Tools",
    "description": "Use these entry points when the site is treated as a static AI-ready color dataset rather than a visual catalog.",
    "count": 2,
    "tools": [
      {
        "url": "https://www.colorsencyclopedia.com/api/",
        "name": "API Hub",
        "type": "developer",
        "description": "Open static JSON endpoints for colors, HEX atlas records, palettes, harmonies, comparisons, brands, WCAG, and CSS utilities.",
        "useCases": [
          "AI ingestion",
          "automation",
          "static APIs"
        ]
      },
      {
        "url": "https://www.colorsencyclopedia.com/dataset/",
        "name": "Dataset Manifest",
        "type": "dataset",
        "description": "Review dataset version, route counts, API families, crawler guidelines, changelog, and build integrity resources.",
        "useCases": [
          "dataset audit",
          "Pay Per Crawl",
          "crawler guidance"
        ]
      }
    ]
  }
]
Semantic groups
[
  "color tools",
  "WCAG tools",
  "color conversion",
  "HEX inspector",
  "AI-ready color APIs",
  "design system utilities"
]
Related endpoints
[
  "https://www.colorsencyclopedia.com/api/tools.json",
  "https://www.colorsencyclopedia.com/api/colors.json",
  "https://www.colorsencyclopedia.com/api/hex.json",
  "https://www.colorsencyclopedia.com/dataset/manifest.json"
]
Full JSON dataset 
{
  "datasetVersion": "1.0.0",
  "hub": "color-tools",
  "label": "Color Tools Hub",
  "url": "https://www.colorsencyclopedia.com/tools/",
  "apiUrl": "https://www.colorsencyclopedia.com/api/tools.json",
  "count": 18,
  "interactiveCount": 15,
  "resourceCount": 3,
  "groups": [
    {
      "key": "exploration",
      "label": "Exploration Tools",
      "description": "Use these tools when you need to find, inspect, or filter colors without browsing thousands of static routes.",
      "count": 2,
      "tools": [
        {
          "url": "https://www.colorsencyclopedia.com/color-explorer/",
          "name": "Color Explorer",
          "type": "filter",
          "description": "Filter 500 editorial colors by family, tone, temperature, luminance, saturation, popularity, tags, and WCAG support.",
          "useCases": [
            "color discovery",
            "taxonomy filtering",
            "WCAG filtering"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/hex/",
          "name": "HEX Atlas Explorer",
          "type": "inspector",
          "description": "Inspect any HEX value and generate RGB, HSL, CMYK, contrast, harmonies, variants, and nearest named colors.",
          "useCases": [
            "HEX lookup",
            "technical conversion",
            "nearest color discovery"
          ]
        }
      ]
    },
    {
      "key": "accessibility",
      "label": "Accessibility Tools",
      "description": "Use these tools when contrast, readable text, UI states, badges, labels, and WCAG AA/AAA checks matter.",
      "count": 2,
      "tools": [
        {
          "url": "https://www.colorsencyclopedia.com/tools/contrast-checker/",
          "name": "WCAG Contrast Checker",
          "type": "checker",
          "description": "Check foreground and background color pairs against WCAG AA and AAA thresholds.",
          "useCases": [
            "contrast testing",
            "accessible UI",
            "text safety"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/wcag/accessible-colors/",
          "name": "Accessible Colors Index",
          "type": "index",
          "description": "Browse named colors with at least one WCAG AA text option, grouped by color family.",
          "useCases": [
            "safe colors",
            "AA/AAA selection",
            "accessible palettes"
          ]
        }
      ]
    },
    {
      "key": "conversion",
      "label": "Conversion Tools",
      "description": "Use these tools when a color needs to move between web, design, and print-oriented color systems.",
      "count": 3,
      "tools": [
        {
          "url": "https://www.colorsencyclopedia.com/convert/hex-to-rgb/",
          "name": "HEX to RGB",
          "type": "converter",
          "description": "Convert HEX color values into RGB channel triplets for CSS, canvas, and design tooling.",
          "useCases": [
            "CSS values",
            "RGB tokens",
            "developer handoff"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/convert/rgb-to-hsl/",
          "name": "RGB to HSL",
          "type": "converter",
          "description": "Convert RGB values into HSL hue, saturation, and lightness for palette generation and UI theming.",
          "useCases": [
            "theme generation",
            "hue analysis",
            "CSS hsl()"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/convert/hsl-to-cmyk/",
          "name": "HSL to CMYK",
          "type": "converter",
          "description": "Convert HSL values through RGB into approximate CMYK values for print-aware references.",
          "useCases": [
            "print approximation",
            "CMYK lookup",
            "design notes"
          ]
        }
      ]
    },
    {
      "key": "css-design",
      "label": "CSS Design Tools",
      "description": "Build production-ready visual effects with a live preview, editable controls, shareable state, and copy-ready CSS.",
      "count": 9,
      "tools": [
        {
          "url": "https://www.colorsencyclopedia.com/tools/css-gradient-generator/",
          "name": "CSS Gradient Studio",
          "type": "generator",
          "description": "Design linear, radial, and conic gradients with editable color stops, live preview, presets, and shareable CSS.",
          "useCases": [
            "CSS backgrounds",
            "UI design",
            "gradient tokens"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/color-palette-generator/",
          "name": "Palette & Token Studio",
          "type": "generator",
          "description": "Generate an accessible 50–950 color scale and export it as CSS variables, SCSS, JSON, or Tailwind tokens.",
          "useCases": [
            "design systems",
            "color scales",
            "CSS tokens"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/css-color-mixer/",
          "name": "CSS Color Mixer",
          "type": "generator",
          "description": "Mix two colors visually and copy a modern color-mix() declaration with a HEX fallback.",
          "useCases": [
            "color mixing",
            "hover states",
            "CSS color-mix"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/box-shadow-generator/",
          "name": "Box Shadow Studio",
          "type": "generator",
          "description": "Build single or layered CSS shadows with a live component preview and copy-ready code.",
          "useCases": [
            "box shadows",
            "UI elevation",
            "cards"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/glassmorphism-generator/",
          "name": "Glassmorphism Studio",
          "type": "generator",
          "description": "Tune blur, transparency, borders, radius, and shadow for accessible glass UI surfaces.",
          "useCases": [
            "glass UI",
            "backdrop blur",
            "overlays"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/text-gradient-generator/",
          "name": "Text Gradient Generator",
          "type": "generator",
          "description": "Create editable gradient text and copy the complete background-clip CSS recipe.",
          "useCases": [
            "gradient text",
            "headings",
            "display type"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/border-gradient-generator/",
          "name": "Border Gradient Generator",
          "type": "generator",
          "description": "Design gradient borders with controllable colors, angle, width, and radius.",
          "useCases": [
            "gradient borders",
            "cards",
            "buttons"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/css-background-pattern-generator/",
          "name": "CSS Pattern Generator",
          "type": "generator",
          "description": "Generate dots, grids, stripes, and checker backgrounds using CSS only.",
          "useCases": [
            "CSS patterns",
            "backgrounds",
            "decorative surfaces"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/tools/css-filter-generator/",
          "name": "CSS Filter Generator",
          "type": "generator",
          "description": "Adjust blur, brightness, contrast, saturation, hue, and more with a live image preview.",
          "useCases": [
            "CSS filters",
            "image effects",
            "hover treatments"
          ]
        }
      ]
    },
    {
      "key": "dataset",
      "label": "Dataset Tools",
      "description": "Use these entry points when the site is treated as a static AI-ready color dataset rather than a visual catalog.",
      "count": 2,
      "tools": [
        {
          "url": "https://www.colorsencyclopedia.com/api/",
          "name": "API Hub",
          "type": "developer",
          "description": "Open static JSON endpoints for colors, HEX atlas records, palettes, harmonies, comparisons, brands, WCAG, and CSS utilities.",
          "useCases": [
            "AI ingestion",
            "automation",
            "static APIs"
          ]
        },
        {
          "url": "https://www.colorsencyclopedia.com/dataset/",
          "name": "Dataset Manifest",
          "type": "dataset",
          "description": "Review dataset version, route counts, API families, crawler guidelines, changelog, and build integrity resources.",
          "useCases": [
            "dataset audit",
            "Pay Per Crawl",
            "crawler guidance"
          ]
        }
      ]
    }
  ],
  "semanticGroups": [
    "color tools",
    "WCAG tools",
    "color conversion",
    "HEX inspector",
    "AI-ready color APIs",
    "design system utilities"
  ],
  "relatedEndpoints": [
    "https://www.colorsencyclopedia.com/api/tools.json",
    "https://www.colorsencyclopedia.com/api/colors.json",
    "https://www.colorsencyclopedia.com/api/hex.json",
    "https://www.colorsencyclopedia.com/dataset/manifest.json"
  ]
}
Dataset manifest Version 1.0.0 Build hash published in manifest Canonical page