Colores

La gama completa de nuestra paleta de colores se utiliza en gráficos e ilustraciones, explorando combinaciones únicas y modernas, así como contrastes monocromáticos. Puede emplearse para destacar un tema específico o un punto de énfasis.

La paleta F5 utiliza siete colores de marca primarios más negro y blanco, cada uno con cuatro variantes de tinte/sombra, para un total de 45 colores. Esta página es la fuente de referencia única para el mapeo de colores de marca a propiedades personalizadas CSS de Starlight durante el desarrollo de temas.

Colores primarios

#e4002b

F5 Red—f5-red

#f29a36

Tangerine—f5-tangerine

#0e41aa

River—f5-river

#ab2782

Raspberry—f5-raspberry

#009639

Jade—f5-jade

#62228b

Eggplant—f5-eggplant

#0072b0

Bay—f5-bay

#ffffff

White—f5-white

#000000

Black—f5-black

Nombre	HEX	RGB	CMYK	LESS	PMS	Variable CSS
F5 Red	`#e4002b`	228, 0, 43	0, 100, 81, 11	`monza`	185	`--f5-red`
Tangerine	`#f29a36`	242, 154, 54	0, 36, 78, 5	`carrot-orange`	1375	`--f5-tangerine`
River	`#0e41aa`	14, 65, 170	92, 62, 0, 33	`tory-blue`	293	`--f5-river`
Raspberry	`#ab2782`	171, 39, 130	0, 77, 24, 33	—	241	`--f5-raspberry`
Jade	`#009639`	0, 150, 57	100, 0, 62, 41	`fun-green`	355	`--f5-jade`
Eggplant	`#62228b`	98, 34, 139	29, 76, 0, 45	`honey-flower`	2617	`--f5-eggplant`
Bay	`#0072b0`	0, 114, 176	100, 35, 0, 31	—	7461	`--f5-bay`
White	`#ffffff`	255, 255, 255	0, 0, 0, 0	`alabaster`	—	`--f5-white`
Black	`#000000`	0, 0, 0	60, 50, 40, 100	`black`	Black	`--f5-black`

Nota sobre los nombres LESS: El Brand Center muestra Raspberry como tory-blue y Bay como honey-flower — estos son errores de copiar y pegar de las entradas de River y Eggplant respectivamente. Se marcan con — arriba para evitar propagar valores incorrectos.

Colores secundarios (tintes y sombras)

Cada color primario tiene cuatro variantes ordenadas de la más clara (Nivel 1) a la más oscura (Nivel 4).

El Brand Center asigna nombres de variables LESS a los colores secundarios. Las variantes de Cloud Red y Tangerine tienen nombres únicos y significativos. Todos los demás grupos de colores muestran los mismos nombres de marcador de posición (wewak, froly, carmine, venetian-red) — estos son valores predeterminados de plantilla de la plataforma de marca y se incluyen a continuación para completitud, pero no deben utilizarse como identificadores canónicos.

F5 Red

#e4002b

F5 Red (base)—f5-red

#f7b2bf

Nivel 1—f5-red-1

#f06680

Nivel 2—f5-red-2

#a70020

Nivel 3—f5-red-3

#720016

Nivel 4—f5-red-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#f7b2bf`	247, 178, 191	0, 28, 23, 3	`wewak`
2	`#f06680`	240, 102, 128	0, 57, 47, 6	`froly`
3	`#a70020`	167, 0, 32	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#720016`	114, 0, 22	0, 100, 81, 55	`venetian-red`

Tangerine

#f29a36

Tangerine (base)—f5-tangerine

#ffe4c4

Nivel 1—f5-tangerine-1

#ffbd61

Nivel 2—f5-tangerine-2

#a35700

Nivel 3—f5-tangerine-3

#7a4100

Nivel 4—f5-tangerine-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#ffe4c4`	255, 228, 196	0, 11, 23, 0	`tequila`
2	`#ffbd61`	255, 189, 97	0, 26, 62, 0	`koromiko`
3	`#a35700`	163, 87, 0	0, 47, 100, 36	`chelsea-gem`
4 (más oscuro)	`#7a4100`	122, 65, 0	0, 47, 100, 52	`cinnamon`

River

#0e41aa

River (base)—f5-river

#b7c6e5

Nivel 1—f5-river-1

#6e8dcc

Nivel 2—f5-river-2

#0b3180

Nivel 3—f5-river-3

#072155

Nivel 4—f5-river-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#b7c6e5`	183, 198, 229	0, 28, 23, 3	`wewak`
2	`#6e8dcc`	110, 141, 204	0, 58, 47, 6	`froly`
3	`#0b3180`	11, 49, 128	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#072155`	7, 33, 85	0, 100, 81, 55	`venetian-red`

Raspberry

#ab2782

Raspberry (base)—f5-raspberry

#e6bed9

Nivel 1—f5-raspberry-1

#cd7db4

Nivel 2—f5-raspberry-2

#801d62

Nivel 3—f5-raspberry-3

#561441

Nivel 4—f5-raspberry-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#e6bed9`	230, 190, 217	0, 28, 23, 3	`wewak`
2	`#cd7db4`	205, 125, 180	0, 58, 47, 6	`froly`
3	`#801d62`	128, 29, 98	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#561441`	86, 20, 65	0, 100, 81, 55	`venetian-red`

Jade

#009639

Jade (base)—f5-jade

#b2dfc4

Nivel 1—f5-jade-1

#66c088

Nivel 2—f5-jade-2

#00712b

Nivel 3—f5-jade-3

#004b1d

Nivel 4—f5-jade-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#b2dfc4`	178, 223, 196	0, 28, 23, 3	`wewak`
2	`#66c088`	102, 192, 136	0, 58, 47, 6	`froly`
3	`#00712b`	0, 113, 43	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#004b1d`	0, 75, 29	0, 100, 81, 55	`venetian-red`

Eggplant

#62228b

Eggplant (base)—f5-eggplant

#cdabe3

Nivel 1—f5-eggplant-1

#9c59c9

Nivel 2—f5-eggplant-2

#822cb8

Nivel 3—f5-eggplant-3

#41175d

Nivel 4—f5-eggplant-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#cdabe3`	205, 171, 227	0, 28, 23, 3	`wewak`
2	`#9c59c9`	156, 89, 201	0, 58, 47, 6	`froly`
3	`#822cb8`	130, 44, 184	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#41175d`	65, 23, 93	0, 100, 81, 55	`venetian-red`

Bay

#0072b0

Bay (base)—f5-bay

#b2d7eb

Nivel 1—f5-bay-1

#66afd7

Nivel 2—f5-bay-2

#005c8d

Nivel 3—f5-bay-3

#003d5f

Nivel 4—f5-bay-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#b2d7eb`	178, 215, 235	0, 28, 23, 3	`wewak`
2	`#66afd7`	102, 175, 215	0, 58, 47, 6	`froly`
3	`#005c8d`	0, 92, 141	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#003d5f`	0, 61, 95	0, 100, 81, 55	`venetian-red`

White (Neutrales)

#ffffff

White (base)—f5-white

#faf9f7

Nivel 1—f5-white-1

#f5f5f5

Nivel 2—f5-white-2

#e6e6e6

Nivel 3—f5-white-3

#cccccc

Nivel 4—f5-white-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#faf9f7`	250, 249, 247	0, 28, 23, 3	`wewak`
2	`#f5f5f5`	245, 245, 245	0, 58, 47, 6	`froly`
3	`#e6e6e6`	230, 230, 230	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#cccccc`	204, 204, 204	0, 100, 81, 55	`venetian-red`

Black (Grises)

#000000

Black (base)—f5-black

#999999

Nivel 1—f5-black-1

#666666

Nivel 2—f5-black-2

#343434

Nivel 3—f5-black-3

#222222

Nivel 4—f5-black-4

Nivel	HEX	RGB	CMYK	LESS
1 (más claro)	`#999999`	153, 153, 153	0, 28, 23, 3	`wewak`
2	`#666666`	102, 102, 102	0, 58, 47, 6	`froly`
3	`#343434`	52, 52, 52	0, 100, 81, 35	`carmine`
4 (más oscuro)	`#222222`	34, 34, 34	0, 100, 81, 55	`venetian-red`

Mapeo a propiedades personalizadas CSS de Starlight

Starlight expone variables --sl-color-* para la personalización de temas. A continuación se presenta el mapeo de la paleta F5 a las ranuras de color semántico de Starlight, implementado en styles/custom.css.

Cómo funciona la personalización de temas en Starlight: En Starlight, el modo oscuro es el valor predeterminado de :root — no existe el selector data-theme="dark". El modo claro utiliza :root[data-theme='light']. Las variables de escala de grises son semánticas, no ordenadas por brillo: gray-1 es siempre “texto principal” y gray-6/gray-7 son siempre “fondos sutiles”, independientemente del modo. Sus valores de brillo reales se intercambian entre modos. De manera similar, accent-high es siempre el color de texto de acento de alta visibilidad y accent-low es siempre el fondo de acento sutil — su brillo se invierte entre modos.

/* Modo oscuro — valor predeterminado de Starlight (:root) */
:root {
  --sl-color-white: #ffffff;      /* Texto de encabezado (más brillante) */
  --sl-color-gray-1: #f5f5f5;    /* Texto principal — White Nivel 2 */
  --sl-color-gray-2: #cccccc;    /* Texto de cuerpo — White Nivel 4 */
  --sl-color-gray-3: #999999;    /* Texto atenuado/silenciado — Black Nivel 1 */
  --sl-color-gray-4: #666666;    /* Bordes — Black Nivel 2 */
  --sl-color-gray-5: #343434;    /* Fondo de código en línea — Black Nivel 3 */
  --sl-color-gray-6: #222222;    /* Fondo de barra lateral — Black Nivel 4 */
  --sl-color-black: #000000;     /* Fondo de página */
  --sl-color-accent-low: #720016;   /* Fondo de acento sutil — F5 Red Nivel 4 */
  --sl-color-accent: #f06680;       /* Enlaces, activo — F5 Red Nivel 2 */
  --sl-color-accent-high: #f7b2bf;  /* Texto de acento — F5 Red Nivel 1 */
}

/* Modo claro — escala de grises e inversión de brillo de acento */
:root[data-theme='light'] {
  --sl-color-white: #222222;      /* Texto de encabezado (más oscuro) — Black Nivel 4 */
  --sl-color-gray-1: #222222;    /* Texto principal — Black Nivel 4 */
  --sl-color-gray-2: #343434;    /* Texto de cuerpo — Black Nivel 3 */
  --sl-color-gray-3: #666666;    /* Texto atenuado — Black Nivel 2 */
  --sl-color-gray-4: #999999;    /* Bordes — Black Nivel 1 */
  --sl-color-gray-5: #cccccc;    /* Bordes claros — White Nivel 4 */
  --sl-color-gray-6: #f5f5f5;    /* Fondo de barra lateral — White Nivel 2 */
  --sl-color-gray-7: #faf9f7;    /* Fondo de navegación — White Nivel 1 */
  --sl-color-black: #ffffff;     /* Fondo de página */
  --sl-color-accent-low: #f7b2bf;   /* Fondo de acento sutil — F5 Red Nivel 1 (invertido) */
  --sl-color-accent: #e4002b;       /* Enlaces, activo — F5 Red */
  --sl-color-accent-high: #720016;  /* Texto de acento — F5 Red Nivel 4 (invertido) */
}

Vista previa visual de tokens

Active el selector de tema para ver cómo cambian estos tokens semánticos entre el modo oscuro y el modo claro.

Tokens de escala de grises

white

Texto de encabezado—sl-color-white

gray-1

Texto principal—sl-color-gray-1

gray-2

Texto de cuerpo—sl-color-gray-2

gray-3

Texto atenuado—sl-color-gray-3

gray-4

Bordes—sl-color-gray-4

gray-5

Fondo de código en línea—sl-color-gray-5

gray-6

Fondo de barra lateral—sl-color-gray-6

black

Fondo de página—sl-color-black

Tokens de acento

accent-low

Fondo de acento sutil—sl-color-accent-low

accent

Enlaces, activo—sl-color-accent

accent-high

Texto de acento—sl-color-accent-high

Tokens de insignia

default

Insignia predeterminada—sl-color-bg-badge-default

note

Insignia de nota—sl-color-bg-badge-note

danger

Insignia de peligro—sl-color-bg-badge-danger

success

Insignia de éxito—sl-color-bg-badge-success

caution

Insignia de precaución—sl-color-bg-badge-caution

tip

Insignia de sugerencia—sl-color-bg-badge-tip

Verificación de contraste (WCAG AA)

Modo oscuro (texto sobre fondo de página #000000):

Texto de cuerpo #cccccc → 16.3:1 (AAA)
Texto atenuado #999999 → 10:1 (AAA)
Enlace de acento #f06680 → 5.6:1 (AA)

Modo claro (texto sobre fondo de página #ffffff):

Texto de cuerpo #343434 → 11.6:1 (AAA)
Texto atenuado #666666 → 5.7:1 (AA)
Enlace de acento #e4002b → 4.6:1 (AA)

Sugerencias de colores semánticos

Variable de Starlight	Color F5	Caso de uso
`--sl-color-accent`	F5 Red `#e4002b`	Enlaces, botones, estados activos
`--sl-color-text-accent`	F5 Red Nivel 2 `#f06680`	Estados hover en modo oscuro
`--sl-color-bg-accent`	F5 Red Nivel 4 `#720016`	Fondos de acento
Personalizado: `--sl-color-info`	Bay `#0072b0`	Llamadas informativas
Personalizado: `--sl-color-success`	Jade `#009639`	Mensajes de éxito
Personalizado: `--sl-color-warning`	Tangerine `#f29a36`	Llamadas de advertencia
Personalizado: `--sl-color-danger`	F5 Red `#e4002b`	Llamadas de error/peligro

Contraste de colores

Para garantizar que todos puedan acceder y comprender nuestras comunicaciones, utilice combinaciones de colores de fondo y texto que cumplan con los estándares de accesibilidad. Seleccione pares de colores con una relación de contraste mínima de 3:1 para texto grande y 4.5:1 para texto normal.

Todos los pares de colores deben cumplir con los requisitos de contraste WCAG AA:

Texto normal (< 18pt / 14pt negrita): relación de contraste mínima de 4.5:1
Texto grande (≥ 18pt / 14pt negrita): relación de contraste mínima de 3:1
Componentes de interfaz de usuario y objetos gráficos: relación de contraste mínima de 3:1

Pares seguros recomendados

Primer plano	Fondo	Relación de contraste	Aprueba
White `#ffffff`	F5 Red `#e4002b`	4.6:1	AA
White `#ffffff`	River `#0e41aa`	6.4:1	AA / AAA
White `#ffffff`	Bay `#0072b0`	4.6:1	AA
White `#ffffff`	Jade `#009639`	4.2:1	AA (texto grande)
White `#ffffff`	Eggplant `#62228b`	6.5:1	AA / AAA
White `#ffffff`	Raspberry `#ab2782`	4.7:1	AA
Black `#000000`	Tangerine `#f29a36`	7.8:1	AA / AAA
Black `#000000`	F5 Red Nivel 1 `#f7b2bf`	10.1:1	AA / AAA
Black `#222222`	White Nivel 1 `#faf9f7`	15.8:1	AA / AAA

Sugerencia: Verifique siempre las relaciones de contraste con una herramienta como WebAIM Contrast Checker al crear nuevas combinaciones de colores.

Directrices de uso

Familia de colores	Rol	Cuándo usarlo
F5 Red	Identidad de marca, CTAs primarios	Secciones hero, botones primarios, marcas de la empresa, estados de error
River	Informativo, confianza	Enlaces de navegación, banners informativos, visualizaciones de datos
Bay	Informativo, secundario	Enlaces secundarios, llamadas informativas, acentos de bloques de código
Jade	Éxito, positivo	Mensajes de éxito, estados de confirmación, indicadores de progreso
Tangerine	Advertencia, atención	Llamadas de advertencia, estados que requieren atención, marcadores de énfasis
Raspberry	Acento, decorativo	Etiquetas, insignias, acentos secundarios, marcadores de categoría
Eggplant	Acento, premium	Destacados de funciones, indicadores premium, acentos decorativos
White / Neutrales	Fondos, superficies	Fondos de página, superficies de tarjeta, divisores, bordes sutiles
Black / Grises	Texto, estructura	Texto de cuerpo, encabezados, bordes, capas de sombra

Verificaciones de tema

El borde de .swatch utiliza --sl-color-gray-5
El fondo de .swatch-label utiliza --sl-color-gray-6
Todas las muestras --f5-* muestran su color real (las propiedades personalizadas CSS se resuelven desde custom.css)
Las muestras de color son visibles tanto en modo claro como en modo oscuro
Las muestras de tokens de insignia se actualizan al cambiar el tema