Web Tool Foundry

Color Palette Tester Tool

How to Use

Create and test your 6-color palette with these simple steps:

  1. Enter color values in the input fields (HEX, RGB, or color names)
  2. See the changes applied to the example UI elements in real-time
  3. Adjust colors until you find the perfect combination
  4. Copy the CSS code to use in your projects

For the best color accuracy, please try WebAIM Contrast Checker or WebAIM Browser Extension.

Color Formats

You can use any of these formats:

  • HEX: #3B82F6
  • RGB: rgb(59, 130, 246)
  • Color names: blue, red, green

Color Roles

Each color in your palette serves a specific purpose:

  • Primary: Main brand color, used for key elements
  • Secondary: Supporting brand color for variety
  • Accent: Highlights, calls-to-action, and important elements
  • Text: Body text and content
  • Background: Main page background
  • Surface: Cards, panels, and UI containers

Accessibility Considerations

The tool provides contrast ratio calculations to help ensure your color combinations meet accessibility standards:

  • 7:1 or higher: Meets WCAG AAA standards for normal text (highest level)
  • 4.5:1 or higher: Meets WCAG AA standards for normal text (minimum recommended) and AAA for large text
  • 3:1 or higher: Meets WCAG AA standards for large text and UI components
  • Less than 3:1: Does not meet accessibility standards

The contrast calculations are color-coded:

  • Green: Passes the specified level (AA or AAA)
  • Yellow/Gold: Close to passing but fails the standard
  • Red: Fails to meet accessibility standards

Text Readability Preview

The Text Readability Preview section shows how your text will appear in different scenarios:

  • Large Headings (text-xl): Shows how headings will appear in each color combination
  • Normal Text (text-base): Demonstrates the readability of body text and paragraphs
  • Small Text (text-xs): Tests the legibility of small text like footnotes or captions

This comprehensive preview helps you identify which color combinations work best for different text sizes and purposes, ensuring your design is both aesthetically pleasing and accessible.

Color Palette Tester Tool

Generated CSS

:root {
--color-primary: #9ccfd8;
--color-secondary: #31748f;
--color-accent: #f6c177;
--color-content: #e0def4;
--color-background: #191724;
--color-surface: #26233a;
}

Color Contrast Combinations

Each color below, demonstrates text color variations on a color swatch.

Primary #9ccfd8
Foreground 12px16px20px
Secondary #31748f sm Calculating... md Calculating... lg Calculating...
Accent #f6c177 sm Calculating... md Calculating... lg Calculating...
Content #e0def4 sm Calculating... md Calculating... lg Calculating...
Background #191724 sm Calculating... md Calculating... lg Calculating...
Surface #26233a sm Calculating... md Calculating... lg Calculating...
Secondary #31748f
Foreground 12px16px20px
Primary #9ccfd8 sm Calculating... md Calculating... lg Calculating...
Accent #f6c177 sm Calculating... md Calculating... lg Calculating...
Content #e0def4 sm Calculating... md Calculating... lg Calculating...
Background #191724 sm Calculating... md Calculating... lg Calculating...
Surface #26233a sm Calculating... md Calculating... lg Calculating...
Accent #f6c177
Foreground 12px16px20px
Primary #9ccfd8 sm Calculating... md Calculating... lg Calculating...
Secondary #31748f sm Calculating... md Calculating... lg Calculating...
Content #e0def4 sm Calculating... md Calculating... lg Calculating...
Background #191724 sm Calculating... md Calculating... lg Calculating...
Surface #26233a sm Calculating... md Calculating... lg Calculating...
Background #191724
Foreground 12px16px20px
Primary #9ccfd8 sm Calculating... md Calculating... lg Calculating...
Secondary #31748f sm Calculating... md Calculating... lg Calculating...
Accent #f6c177 sm Calculating... md Calculating... lg Calculating...
Content #e0def4 sm Calculating... md Calculating... lg Calculating...
Surface #26233a sm Calculating... md Calculating... lg Calculating...
Surface #26233a
Foreground 12px16px20px
Primary #9ccfd8 sm Calculating... md Calculating... lg Calculating...
Secondary #31748f sm Calculating... md Calculating... lg Calculating...
Accent #f6c177 sm Calculating... md Calculating... lg Calculating...
Content #e0def4 sm Calculating... md Calculating... lg Calculating...
Background #191724 sm Calculating... md Calculating... lg Calculating...

Text Readability Preview

Text on Primary #9ccfd8

Secondary Large Heading

This is normal text in Secondary color on Primary background. It shows how readable your body text will be.

Small text in Secondary color on Primary background. Small text needs higher contrast to be readable.

Link Example Secondary
Accent Large Heading

This is normal text in Accent color on Primary background. It shows how readable your body text will be.

Small text in Accent color on Primary background. Small text needs higher contrast to be readable.

Link Example Accent
Content Large Heading

This is normal text in Content color on Primary background. It shows how readable your body text will be.

Small text in Content color on Primary background. Small text needs higher contrast to be readable.

Link Example Content
Background Large Heading

This is normal text in Background color on Primary background. It shows how readable your body text will be.

Small text in Background color on Primary background. Small text needs higher contrast to be readable.

Link Example Background
Surface Large Heading

This is normal text in Surface color on Primary background. It shows how readable your body text will be.

Small text in Surface color on Primary background. Small text needs higher contrast to be readable.

Link Example Surface

Text on Secondary #31748f

Primary Large Heading

This is normal text in Primary color on Secondary background. It shows how readable your body text will be.

Small text in Primary color on Secondary background. Small text needs higher contrast to be readable.

Link Example Primary
Accent Large Heading

This is normal text in Accent color on Secondary background. It shows how readable your body text will be.

Small text in Accent color on Secondary background. Small text needs higher contrast to be readable.

Link Example Accent
Content Large Heading

This is normal text in Content color on Secondary background. It shows how readable your body text will be.

Small text in Content color on Secondary background. Small text needs higher contrast to be readable.

Link Example Content
Background Large Heading

This is normal text in Background color on Secondary background. It shows how readable your body text will be.

Small text in Background color on Secondary background. Small text needs higher contrast to be readable.

Link Example Background
Surface Large Heading

This is normal text in Surface color on Secondary background. It shows how readable your body text will be.

Small text in Surface color on Secondary background. Small text needs higher contrast to be readable.

Link Example Surface

Text on Accent #f6c177

Primary Large Heading

This is normal text in Primary color on Accent background. It shows how readable your body text will be.

Small text in Primary color on Accent background. Small text needs higher contrast to be readable.

Link Example Primary
Secondary Large Heading

This is normal text in Secondary color on Accent background. It shows how readable your body text will be.

Small text in Secondary color on Accent background. Small text needs higher contrast to be readable.

Link Example Secondary
Content Large Heading

This is normal text in Content color on Accent background. It shows how readable your body text will be.

Small text in Content color on Accent background. Small text needs higher contrast to be readable.

Link Example Content
Background Large Heading

This is normal text in Background color on Accent background. It shows how readable your body text will be.

Small text in Background color on Accent background. Small text needs higher contrast to be readable.

Link Example Background
Surface Large Heading

This is normal text in Surface color on Accent background. It shows how readable your body text will be.

Small text in Surface color on Accent background. Small text needs higher contrast to be readable.

Link Example Surface

Text on Content #e0def4

Primary Large Heading

This is normal text in Primary color on Content background. It shows how readable your body text will be.

Small text in Primary color on Content background. Small text needs higher contrast to be readable.

Link Example Primary
Secondary Large Heading

This is normal text in Secondary color on Content background. It shows how readable your body text will be.

Small text in Secondary color on Content background. Small text needs higher contrast to be readable.

Link Example Secondary
Accent Large Heading

This is normal text in Accent color on Content background. It shows how readable your body text will be.

Small text in Accent color on Content background. Small text needs higher contrast to be readable.

Link Example Accent
Background Large Heading

This is normal text in Background color on Content background. It shows how readable your body text will be.

Small text in Background color on Content background. Small text needs higher contrast to be readable.

Link Example Background
Surface Large Heading

This is normal text in Surface color on Content background. It shows how readable your body text will be.

Small text in Surface color on Content background. Small text needs higher contrast to be readable.

Link Example Surface

Text on Background #191724

Primary Large Heading

This is normal text in Primary color on Background background. It shows how readable your body text will be.

Small text in Primary color on Background background. Small text needs higher contrast to be readable.

Link Example Primary
Secondary Large Heading

This is normal text in Secondary color on Background background. It shows how readable your body text will be.

Small text in Secondary color on Background background. Small text needs higher contrast to be readable.

Link Example Secondary
Accent Large Heading

This is normal text in Accent color on Background background. It shows how readable your body text will be.

Small text in Accent color on Background background. Small text needs higher contrast to be readable.

Link Example Accent
Content Large Heading

This is normal text in Content color on Background background. It shows how readable your body text will be.

Small text in Content color on Background background. Small text needs higher contrast to be readable.

Link Example Content
Surface Large Heading

This is normal text in Surface color on Background background. It shows how readable your body text will be.

Small text in Surface color on Background background. Small text needs higher contrast to be readable.

Link Example Surface

Text on Surface #26233a

Primary Large Heading

This is normal text in Primary color on Surface background. It shows how readable your body text will be.

Small text in Primary color on Surface background. Small text needs higher contrast to be readable.

Link Example Primary
Secondary Large Heading

This is normal text in Secondary color on Surface background. It shows how readable your body text will be.

Small text in Secondary color on Surface background. Small text needs higher contrast to be readable.

Link Example Secondary
Accent Large Heading

This is normal text in Accent color on Surface background. It shows how readable your body text will be.

Small text in Accent color on Surface background. Small text needs higher contrast to be readable.

Link Example Accent
Content Large Heading

This is normal text in Content color on Surface background. It shows how readable your body text will be.

Small text in Content color on Surface background. Small text needs higher contrast to be readable.

Link Example Content
Background Large Heading

This is normal text in Background color on Surface background. It shows how readable your body text will be.

Small text in Background color on Surface background. Small text needs higher contrast to be readable.

Link Example Background

Explore More Tools

New
💰

Crypto Miner Profitability Calculator Instructions

Learn how to use the Crypto Miner Profitability Calculator.
Popular
🌡️

Temperature Converter Tool

Easily convert between Celsius and Fahrenheit with our simple, accurate temperature converter.