Skip to color tool
FOX—FORGE
[ TOOL / 001 ]

Color
Utility.

Convierte, inspecciona y compara colores sin salir del navegador.

Convert / inspect / compare
Runs locally
No uploads
Status: functional prototype
How to use

One color workflow.

Start with Color A, inspect its values and accessibility, compare it with Color B, then build palettes, extract colors from images, and export design tokens.

  1. 01
    Choose Color A

    Enter HEX or use the native color picker.

  2. 02
    Inspect

    Read color spaces, contrast, gamut and recommended text.

  3. 03
    Compare

    Compare against Color B using CIEDE2000 Delta E.

  4. 04
    Build & export

    Create palettes and tokens for design and development.

Color A

This is the working color. Every conversion, contrast result, harmony and tone scale below updates from Color A.

Color values

The same Color A expressed in common screen, print-reference and perceptual color spaces. CMYK is a generic mathematical conversion, not an ICC-profiled print conversion.

HEX
RGB
HSL
CMYK
LAB
LCH
OKLCH
P3

Contrast check

Checks Color A against white and black using WCAG contrast ratios. Use the recommendation as a quick text-color decision.

Contrast / White
3.27:1
Large text only
Contrast / Black
6.42:1
AA normal text
Live preview
#FF4D00
[ V6 / Print prep ]

CMYK / Print.

Use this as a print-preparation reference. Browser CMYK is only an estimate until a real ICC profile engine is connected.

Generic CMYK
C 0% / M 70% / Y 100% / K 0%
Total ink coverage
170%
Within common limits
Black build
No black ink
Professional note

Final CMYK values depend on press condition, paper and ICC profile. Use the current values for planning only, not final color approval.

[ Compare / CIEDE2000 ]

Compare colors.

Useful for brand matching, print checks and judging whether two colors are visually close.

Color B

Delta E 2000

Use Color B as a reference color. Delta E 2000 estimates the perceptual difference between Color A and Color B: lower values mean the colors are more similar.

#F4511E
LAB / COLOR B
--
ΔE 2000
--
--

Gamut check

Shows whether the current color can be represented inside each display color space. A wider gamut can contain colors that standard sRGB cannot.

sRGB
In gamut
Display P3
In gamut
COLOR SPACES
LAB: PERCEPTUAL
LCH: POLAR LAB
OKLCH: MODERN UI
P3: WIDE GAMUT

Recommended text

Chooses black or white based on which provides the stronger contrast against Color A.

Use black text.
WCAG QUICK CHECK
AA NORMAL: 4.5:1
AA LARGE: 3:1
AAA NORMAL: 7:1
[ V4 / Palette system ]

Build a palette.

Generate color relationships from Color A, save useful swatches, and create a reusable palette before export.

Save colors
Generate harmonies
Build tone scales

Harmony

Harmony colors are generated from Color A using standard hue relationships. Click any swatch to copy its HEX value.

Saved palette

Your working collection. These colors can be exported later as design tokens.

No colors saved yet.
[ Scale / 50—900 ]

Tone scale

A light-to-dark exploration generated from Color A. Useful as a starting point for interface scales; review each step before production use.

[ V5 / Image extraction ]

Extract from image.

Load an image locally and generate a dominant-color palette. The file stays in your browser and is not uploaded.

Local processing
No uploads
Dominant colors

Drop image
Click, press Enter, or drop a file
JPG / PNG / WEBP
Press Enter or Space to choose an image.
Image preview
No image loaded
Image preview will appear here.

Dominant palette

Click a color to copy
Load an image to generate a palette.
[ V7 / Design tokens ]

Export your system.

Turn your saved palette, tone scale or current harmony into reusable code for design systems and front-end projects.

CSS variables
JSON tokens
Tailwind config

Source
Generated output