Códigos de color de marca: cómo documentar hex, RGB, CMYK y Pantone

Los códigos de color de marca van en una sola tabla de tu guía de estilo, con una fila por color y una columna por medio: hex para webs, RGB para pantallas y vídeo, CMYK para imprenta y una referencia Pantone para tintas planas, rótulos y merchandising. Añade un nombre, una función y las combinaciones de texto aprobadas, y cualquiera, de un desarrollador a un rotulista, podrá reproducir el color sin adivinar. La mayor parte de la incoherencia aparece cuando alguien se inventa su propia conversión porque la guía solo le dio un código.

La tabla de códigos de color de marca

Aquí tienes un ejemplo completo para una marca ficticia con un rojo principal, un azul secundario, una tinta y dos neutros. Copia la estructura y cambia los valores por los tuyos.

Para qué sirve cada código de color

• Hex (#C8102E) es la forma abreviada de un color RGB en la web. Lo piden los desarrolladores, Figma y casi todas las herramientas de diseño. Códigos de color hex explica cómo leerlo.
• RGB (200 16 46) es el mismo color escrito como valores de rojo, verde y azul de 0 a 255. Lo piden los editores de vídeo y algunas apps. La conversión entre hex y RGB es exacta; mira hex a RGB.
• CMYK (0 92 77 22) es la mezcla de tintas cian, magenta, amarilla y negra de la cuatricromía. Depende de la máquina y del papel, así que debe venir de tu imprenta o de una conversión con gestión de color.
• Pantone (186 C) nombra una tinta plana premezclada de una guía de muestras física. Es la forma más fiable de conseguir el mismo color en tarjetas, rótulos, tela y envases. El sufijo importa: C es papel estucado, U es papel no estucado.
• Opcional: valores oklch o HSL ayudan a los equipos web a crear tintes y variantes para el modo oscuro. Inclúyelos si tus desarrolladores trabajan así.

Cómo definir tus códigos de color de marca

1. 1

   Decide tu medio principal

   Si la marca vive sobre todo en pantallas, empieza por el hex. Si vive en envases, uniformes o rótulos, empieza por una muestra Pantone física y ajusta el color de pantalla a ella.

2. 2

   Elige el Pantone en persona

   Mira una guía Pantone real con luz de día, no una vista previa en pantalla. Elige las muestras estucada y no estucada más cercanas y apunta ambas.

3. 3

   Pide el CMYK a tu imprenta

   Envía el hex y la referencia Pantone, pide sus valores CMYK con gestión de color y aprueba una prueba impresa.

4. 4

   Fija los valores de pantalla al final

   Ajusta el hex para que se parezca a la muestra impresa en varias pantallas calibradas. Hex y RGB se derivan después exactamente uno del otro.

5. 5

   Anota las combinaciones aprobadas

   Indica qué colores pueden ir sobre cuáles, con sus ratios de contraste, para que nadie ponga texto rojo sobre azul marino.

Pantone vs hex trata el paso de ajuste con más detalle, incluido por qué la vista previa de una muestra Pantone en pantalla nunca es del todo fiel.

Documenta combinaciones aprobadas y contraste

Los códigos dicen cómo crear un color. Las combinaciones dicen cómo usarlo. Una tabla breve de contraste evita el error más común: juntar dos colores de marca que parecen potentes por separado y fallan como texto y fondo.

El método detrás de esas cifras está en contraste de color y accesibilidad.

Cómo pasar los códigos de color a los desarrolladores

Da a los desarrolladores los colores como tokens con nombre, no un PDF que tengan que volver a teclear. Los nombres por función hacen el código legible y sobreviven a un cambio de tono.

:root {
  --brand-primary: #c8102e;   /* Signal red, Pantone 186 C */
  --brand-secondary: #0047bb; /* Harbour blue, Pantone 2728 C */
  --brand-ink: #101820;       /* Ink, Pantone Black 6 C */
  --brand-mist: #d9d9d6;      /* Mist, Pantone Cool Gray 1 C */
  --brand-paper: #f5f3ee;     /* Paper */
}

Los códigos, donde la gente diseña

Una tabla de color en un PDF solo sirve si alguien la abre. Pon la misma paleta allí donde realmente se crean los diseños. En Gradiently, el kit de marca (incluido en Pro) guarda tus paletas de color junto a tus logos y fuentes, y el Designer las usa al maquetar un diseño, así que los códigos correctos viajan con cada publicación. El resto de la guía, de la tipografía al tono de voz, está en guía de estilo de marca.