Corporate Color System

Color palettes that define brands, not just screens.

Pick a base color or extract from an image, tune harmony angles, test accessibility contrast, and generate light/dark modes automatically.

Get Started Below

Base Color #3C83F6

+30° #7766F4

+60° #A418FB

-30° #7CE5F3

-60° #00FF9D

Palette Generator

Select your primary base color and adjust harmony angle from analogous to triadic or tetradic.

Base Brand Color (HEX)

Harmony Angle

Analogous · Real-time computation

30 °

Extract Palette from Image

K-means color clustering extracts the top 5 dominant brand hues.

Dominant extracted colors will appear here.

Accesibilidad visual

Simulate color vision deficiencies and validate WCAG contrast ratios.

Vision Deficiency Simulator

Base Color #3C83F6

+30° #7766F4

+60° #A418FB

-30° #7CE5F3

-60° #00FF9D

How a person with normal color vision perceives your palette.

WCAG Contrast · Base Color

Texto blanco

3.68

contrast ratio

AA normal AAA normal Grande AA

Texto negro

5.71

contrast ratio

AA normal AAA normal Grande AA

Cross-Contrast Matrix

Ratio WCAG de cada texto (fila) sobre cada fondo (columna).

Texto \ Fondo	#3C83F6	#7766F4	#A418FB	#7CE5F3	#00FF9D
#3C83F6	Aa1.0	Aa1.2	Aa1.4	Aa2.5	Aa2.7
#7766F4	Aa1.2	Aa1.0	Aa1.2	Aa2.9	Aa3.2
#A418FB	Aa1.4	Aa1.2	Aa1.0	Aa3.5	Aa3.8
#7CE5F3	Aa2.5	Aa2.9	Aa3.5	Aa1.0	Aa1.1
#00FF9D	Aa2.7	Aa3.2	Aa3.8	Aa1.1	Aa1.0

AA / AAA Combinación accesible Falla (relación < 4,5:1)

Modo claro y oscuro automático

Generamos los tokens de UI ajustando la luminancia para cumplir el contraste WCAG AA en ambos modos.

Modo claro 7.4 :1 AA

Panel de control

Texto secundario legible en este modo de interfaz.

Etiqueta

Modo oscuro 7.0 :1 AA

Panel de control

Texto secundario legible en este modo de interfaz.

Etiqueta

Exportar para desarrolladores

Copy the palette list to paste into your project.

:root {
  --color-base: #3C83F6;
  --color-color-2: #7766F4;
  --color-color-3: #A418FB;
  --color-color-4: #7CE5F3;
  --color-color-5: #00FF9D;
}

Mi galería

Your saved palettes stored in this browser.

No saved palettes yet.

Genera una combinación y pulsa «Save to Library».

¿Necesitas una identidad visual completa?

Descargue esta paleta en PDF lista para presentar. Y si buscas llevar tu marca al siguiente nivel, nuestro equipo de diseño puede ayudarte. Ingresa tu correo para recibir el documento.