Color Lab

Getting Started

Open Color Lab.
Enter a base HEX color.
Choose a harmony type.
Click Generate.
Explore the generated palette.
Adjust or export the colors.

Base Color

Enter a HEX value such as:

#3B82F6

The tool accepts standard three-digit and six-digit HEX colors through its color utilities.

Harmony Modes

Mode	Description
Analogous	Related hues near the base
Complementary	Base color and opposing hue
Split-Complementary	Base and two hues around its complement
Triadic	Three hues spaced around the color wheel
Tetradic	Four-color harmony
Monochrome	Variations of one hue

Random

Click Random to generate a new base color.

Eyedropper

Click Eyedropper to invoke the browser's color-picking capability where supported.

Eyedropper availability depends on the browser and its permissions.

Color Wheel

Color Lab displays a graphical color wheel.

The wheel helps visualize the relationship between the selected base color and its harmony.

The generated palette appears as a collection of color swatches.

Interacting with Swatches

Copy a Color

Click a swatch to copy its HEX value.

Select a New Base Color

Right-click a palette swatch to use that color as the base color.

The application then updates the base color control.

Adjust Palette

Color Lab allows additional modifications to the generated palette.

Adjustment	Range	Default
Hue	-180° to 180°	0°
Saturation	-100 to 100	0
Brightness	-100 to 100	0
Temperature	-50 to 50	0

Hue

Rotates palette hues around the color wheel.

Saturation

Adjusts the intensity of the palette colors.

Brightness

Adjusts the apparent lightness of the colors.

Temperature

Applies a cool-to-warm color adjustment.

Reset

Click Reset to restore the palette adjustment controls.

Export Palette

Color Lab supports several palette serialization formats.

Format	Intended Use
CSS variables	Define reusable CSS colors
Embeddable JS widget	Integrate a generated palette widget
Tailwind object	Use colors in Tailwind configuration
CSV	Import into spreadsheets or design utilities
CSV with #	CSV representation retaining HEX prefixes
Array	JavaScript-style array
Object (name:hex)	Named color mapping
Extended Array	Detailed array representation
XML	Structured XML representation

Exporting

Generate a palette.
Select the desired export format.
Review the generated source.
Click Copy or Download .txt.

Example CSS Variables

A CSS palette may resemble:

:root {
  --color-1: #3b82f6;
  --color-2: #22d3ee;
  --color-3: #10b981;
}

The exact variable names and formatting depend on the selected exporter.

Contrast Checker

Color Lab includes a contrast-checking tool for evaluating text and background colors.

Usage

Enter the text color.
Enter the background color.
Click Check.
Review the displayed contrast ratio.
Inspect the AA and AAA indicators.

Example

Foreground: #FFFFFF
Background: #000000

This combination has a contrast ratio of 21:1.

Understanding Contrast Ratios

Common WCAG contrast thresholds for text are:

Level	Normal Text	Large Text
AA	4.5:1	3:1
AAA	7:1	4.5:1

Color Lab reports contrast information using its implemented criteria.

For accessibility assessments, also consider text size, font weight, and the applicable WCAG requirements.

Preview

The contrast panel includes color swatches and a text preview.

This helps assess how foreground and background colors appear together.

Recommended Workflow

Choose a base brand color.
Generate a complementary or analogous palette.
Adjust color temperature and saturation.
Check text readability.
Export the palette into your development or design workflow.

Tip: Strong visual harmony does not necessarily guarantee accessible contrast. Always evaluate text and background combinations separately.