# Códigos de color de marca: cómo documentar hex, RGB, CMYK y Pantone [Canonical HTML page](https://gradiently.design/es/guide/brand-color-codes) Un color de marca solo es coherente si todo el que lo usa tiene el código correcto para su medio. Esta es la tabla que necesita toda guía de estilo, para qué sirve cada código y en qué orden definirlos. ## The short version - Los códigos de color de marca deben dar cada color en cuatro formatos: hex para la web, RGB para pantallas, CMYK para imprenta y una referencia Pantone para tintas planas y objetos físicos. - Cada color de una guía de estilo necesita además un nombre, una función y una lista de combinaciones de texto aprobadas con sus ratios de contraste. - Hex y RGB describen exactamente el mismo color de pantalla, así que se convierten con precisión, mientras que CMYK y Pantone necesitan una conversión con gestión de color y una prueba impresa. - Si tu marca aparece sobre todo en papel o en productos, elige primero la referencia Pantone y ajusta los códigos de pantalla a ella. - Nombra los colores por su función, como principal o tinta, para que la guía siga teniendo sentido si un tono cambia más adelante. 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. | Nombre y función | Hex | RGB | CMYK | Pantone | | --- | --- | --- | --- | --- | | Rojo señal, principal | `#C8102E` | 200 16 46 | 0 92 77 22 | 186 C | | Azul puerto, secundario | `#0047BB` | 0 71 187 | 100 62 0 27 | 2728 C | | Tinta, texto | `#101820` | 16 24 32 | Negro enriquecido de la imprenta | Black 6 C | | Bruma, neutro | `#D9D9D6` | 217 217 214 | 0 0 1 15 | Cool Gray 1 C | | Papel, fondo | `#F5F3EE` | 245 243 238 | 0 1 3 4 | Papel sin imprimir | Una tabla de color para una guía de estilo. Las cifras CMYK son conversiones aritméticas simples, solo de ejemplo; sustitúyelas por los valores que te dé tu imprenta tras una conversión con gestión de color. - Rojo señal: #c8102e - Azul puerto: #0047bb - Tinta: #101820 - Bruma: #d9d9d6 - Papel: #f5f3ee Los mismos cinco colores como muestras. Una guía siempre debería enseñar el color junto a sus códigos, para que un dígito equivocado salte a la vista. ## 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](https://gradiently.design/es/guide/color-codes-explained) 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](https://gradiently.design/es/guide/hex-to-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í. > **No todos los colores de pantalla se pueden imprimir** Los azules, verdes y naranjas muy saturados quedan fuera de lo que la tinta CMYK puede reproducir. Si tu color de marca es uno de ellos, decide ahora si la imprenta usará una tinta plana Pantone o una versión CMYK algo más apagada, y déjalo por escrito. [RGB vs CMYK](https://gradiently.design/es/guide/rgb-vs-cmyk) explica por qué. ## Cómo definir tus códigos de color de marca 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. **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. **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. **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. **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](https://gradiently.design/es/guide/pantone-colors) 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. | Texto | Fondo | Contraste | Uso | | --- | --- | --- | --- | | Blanco | Rojo señal | 5,9:1 | Botones, banners, cualquier tamaño | | Blanco | Azul puerto | 8,0:1 | Cualquier tamaño | | Tinta | Papel | 16,1:1 | Texto de cuerpo | | Rojo señal | Papel | 5,3:1 | Titulares y enlaces | | Rojo señal | Tinta | 3,0:1 | Solo texto grande de titular | Ratios de contraste calculados con la fórmula WCAG. El texto de cuerpo necesita al menos 4,5:1 y el texto grande, 3:1. El método detrás de esas cifras está en [contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility). ## 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. ```css :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 */ } ``` La misma tabla como propiedades personalizadas de CSS, con la referencia Pantone en un comentario para quien la necesite. ### Evita - Un código hex y nada más - Colores llamados «rojo 2» y «azul nuevo» - CMYK copiado de un conversor online - Pantone elegido en una vista previa de pantalla ### Haz - Hex, RGB, CMYK y Pantone para cada color - Nombres que dicen para qué sirve el color - CMYK de tu imprenta, comprobado en una prueba - Pantone elegido en una guía física ## 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](https://gradiently.design/es/guide/brand-style-guide). ## FAQ ### ¿Qué códigos de color debe incluir una guía de estilo de marca? Hex, RGB, CMYK y una referencia Pantone para cada color, además de un nombre, una función y las combinaciones de texto aprobadas con sus ratios de contraste. ### ¿Hex es lo mismo que RGB? Sí. Hex es RGB escrito en base dieciséis, así que `#C8102E` y 200 16 46 son exactamente el mismo color. ### ¿Cómo convierto un color hex a CMYK? Los conversores online dan un punto de partida aproximado, pero el CMYK depende de la máquina y del papel. Pide a tu imprenta una conversión con gestión de color y aprueba una prueba impresa. ### ¿Necesito un color Pantone para mi marca? Si tu marca aparece en rótulos, envases, ropa o merchandising, sí: una referencia Pantone es la forma más fiable de conseguir el mismo color en materiales distintos. ### ¿Qué significa la C o la U después de un número Pantone? C significa papel estucado y U, papel no estucado. La misma tinta se ve distinta en cada uno, así que apunta ambas si imprimes en los dos.