Colores

El uso de una librería de colores institucional es fundamental para mantener la identidad visual del Poder Judicial del Estado de Nuevo León en todos sus espacios digitales. La selección cromática refuerza la coherencia y profesionalismo de la institución, asegurando que cada micrositio y plataforma web refleje de manera armoniosa nuestros valores y principios.

En esta sección, encontrarás los códigos de color oficiales utilizados en el sitio web principal y en los micrositios auxiliares. Es importante emplearlos de manera consistente para garantizar una imagen unificada y accesible en todas las plataformas digitales.

Colores principales

Los colores principales representan la identidad visual del Poder Judicial del Estado de Nuevo León y están basados en la paleta oficial de su logotipo. Su uso correcto garantiza coherencia y reconocimiento en todas las plataformas digitales e impresas. A continuación, se presentan los códigos de color oficiales para su correcta aplicación.

Librería de colores

Para cada color, se especifican sus valores en diferentes formatos (HEX, RGB, CMYK y Pantone), facilitando su correcta aplicación tanto en entornos digitales como en materiales impresos.

TAG	HEX	RGB	CMYK	Pantone
blue-dark	#01233F	R1 G35 B63	C100 M84 Y46 K53	Pantone 289 C
blue-medium	#0e2e49	R14 G46 B73	C100 M78 Y44 K44	Pantone 2767 C
blue-light	#003366	R0 G51 B102	C100 M83 Y42 K41	Pantone 295 C
cyan-dark	#006699	R0 G102 B153	C91 M53 Y19 K4	Pantone 647 C
cyan-medium	#0099CC	R0 G153 B204	C78 M22 Y8 K0	Pantone 2767 C
cyan-light	#00CCFF	R51 G102 B153	C84 M56 Y18 K4	Pantone 2985 C
gold-dark	#908233	R144 G130 B51	C40 M36 Y88 K22	Pantone 7768 C
gold-medium	#BCA431	R188 G164 B49	C36 M38 Y96 K0	Pantone 457 C
gold-light	#DBB826	R219 G184 B38	C16 M24 Y91 K3	Pantone 7752 C
gray-1	#111111	R17 G17 B17	C79 M70 Y62 K89	Pantone Neutral Black 6 C
gray-dark	#222222	R34 G34 B34	C74 M64 Y59 K78	Pantone Neutral Black C
gray-6	#666666	R102 G102 B102	C56 M45 Y45 K33	Pantone Cool Gray 10 C
gray-9	#999999	R153 G153 B153	C47 M36 Y36 K0	Pantone Cool Gray 7 C
gray-medium	#CCCCCC	R204 G204 B204	C23 M18 Y19 K0	Pantone Cool Gray 3 C
gray-light	#EEEEEE	R238 G238 B2038	C8 M5 Y7 K0	Pantone Cool Gray 1 C

Fondos con color

Los colores pueden ser aplicados como fondos en diferentes elementos como: Section, Container, Row, Column, Header, Card, entre otros. La manera de aplicarlo es utilizando el TAG correspondiente en la clase del elemento. En el siguiente ejemplo lo utilizamos en una Sección:

Ejemplo de fondo con color

Código HTML:

								
										
<!-- Seccción -->
<section class="bg-blue-dark">
	...
</section>

<!-- Contendedor -->
<div class="container bg-blue-dark">
	...
</div>

<!-- Línea -->
<div class="row bg-blue-dark">
	...
</div>

<!-- Columna -->
<div class="col-md-12 bg-blue-dark">
	...
</div>

Textos e Iconos con color

Los textos e iconos tienen un color por defecto y cuando se requiera se les puede aplicar color. La manera de aplicarlo es utilizando el TAG correspondiente en la clase del elemento. Ejemplo aplicado en textos e iconos:

Texto normal	Texto con color	Icono normal	Icono con color
Texto normal	Texto con color

Código HTML, tomando como ejemplo el botón primario:

								
								
<!-- Texto con color -->
<p class="text-cyan-dark">Texto con color</p>

<!-- Icono con color -->
<i class="fa fa-2x fa-solid fa-ambulance text-cyan-dark"></i>

CSS para Color de Fondos y Textos

Código CSS:

								

/*============================================================
COLORS
Estilos para los dar de alta las variables de los colores que se utilizan en el sitio web, junto con los colores de fondos y textos
============================================================*/
/*----- Variables -----*/
:root {
    --white: #FFFFFF !important;
    --black: #000000 !important;

    --gray-fb: #FBFBFB !important;
    --gray-f2: #F2F2F2 !important;
    --gray-f5: #F5F5F5 !important;
	--gray-e: #EEEEEE !important;
    --gray-d: #DDDDDD !important;
    --gray-c: #CCCCCC !important;
    --gray-9: #999999 !important;
    --gray-8: #888888 !important;
    --gray-7: #777777 !important;
    --gray-6: #666666 !important;
    --gray-5: #555555 !important;
    --gray-4: #444444 !important;
    --gray-3: #333333 !important;
    --gray-29: #292929 !important;
	--gray-2: #222222 !important;
    --gray-1: #111111 !important;
	
    --gray-light: #EEEEEE !important;
	--gray-medium: #CCCCCC !important;
    --gray-dark: #222222 !important;

    --blue-light: #003366 !important;
    --blue-medium: #0e2e49 !important;
    --blue-dark: #01233F !important;
	
	--cyan-light: #00CCFF !important;
	--cyan-medium: #0099CC !important;
    --cyan-dark: #006699 !important;

    --gold-light: #DBB826 !important;
	--gold-medium: #BCA431 !important;
    --gold-dark: #908233 !important;

    --green-light: #60C897 !important;
    --green-dark: #339966 !important;

    --red-light: #E46C78 !important;
    --red-dark: #C44C58 !important;

    --yellow-light: #F8B95A !important;
    --yellow-dark: #D89938 !important;

    --orange-light: #E56D65 !important;
    --orange-dark: #DE443A !important;

    --brown-light: #C2A789 !important;
    --brown-dark: #B3916C !important;

    --purple-light: #A7B9DA !important;
    --purple-dark: #91A8D1 !important;
}


/*============================================================
BACKGROUNDS
============================================================*/
.bg-gray-fb {
    background-color: var(--gray-fb);
}

.bg-gray-f2 {
    background-color: var(--gray-f2);
}

.bg-gray-light {
    background-color: var(--gray-light);
}

.bg-gray-medium {
    background-color: var(--gray-medium);
}

.bg-gray-dark {
    background-color: var(--gray-dark);
}

.bg-blue-dark {
    background-color: var(--blue-dark);
}

.bg-blue-medium {
    background-color: var(--blue-medium);
}

.bg-blue-light {
    background-color: var(--blue-light);
}

.bg-cyan-dark {
    background-color: var(--cyan-dark);
}

.bg-cyan-medium {
    background-color: var(--cyan-medium);
}

.bg-cyan-light {
    background-color: var(--cyan-light);
}

.bg-gold-dark {
    background-color: var(--gold-dark);
}

.bg-gold-medium {
    background-color: var(--gold-medium);
}

.bg-gold-light {
    background-color: var(--gold-light);
}

.bg-red-dark {
    background-color: var(--red-dark);
}

.bg-red-light {
    background-color: var(--red-light);
}

.bg-yellow-dark {
    background-color: var(--yellow-dark);
}

.bg-yellow-light {
    background-color: var(--yellow-light);
}

.bg-green-dark {
    background-color: var(--green-dark);
}

.bg-green-light {
    background-color: var(--green-light);
}

.bg-orange-dark {
    background-color: var(--orange-dark);
}

.bg-orange-light {
    background-color: var(--orange-light);
}

.bg-brown-dark {
    background-color: var(--brown-dark);
}

.bg-brown-light {
    background-color: var(--brown-light);
}

.bg-purple-dark {
    background-color: var(--purple-dark);
}

.bg-purple-light {
    background-color: var(--purple-light);
}

.bg-dot {
    background-image: url(https://www.pjenl.gob.mx/Media/img/bg-dot.svg);
}

.bg-grid {
    background-image: url(https://www.pjenl.gob.mx/Media/img/bg-grid.svg);
}

.bg-line {
    background-image: url(https://www.pjenl.gob.mx/Media/img/bg-line.svg);
}

.bg-dot-white {
    background-image: url(https://www.pjenl.gob.mx/Media/img/bg-dot-white.svg);
}

.bg-grid-white {
    background-image: url(https://www.pjenl.gob.mx/Media/img/bg-grid-white.svg);
}

.bg-line-white {
    background-image: url(https://www.pjenl.gob.mx/Media/img/bg-line-white.svg);
}


/*============================================================
COLOR TEXTS
============================================================*/
.text-gray-light {
    color: var(--gray-light);
}

.text-gray-medium {
    color: var(--gray-medium);
}

.text-gray-dark {
    color: var(--gray-dark);
}

.text-blue-dark {
    color: var(--blue-dark);
}

.text-blue-medium {
    color: var(--blue-light);
}

.text-blue-light {
    color: var(--blue-light);
}

.text-gold-dark {
    color: var(--gold-dark);
}

.text-gold-medium {
    color: var(--gold-medium);
}

.text-gold-light {
    color: var(--gold-light);
}

.text-cyan-dark {
    color: var(--cyan-dark);
}

.text-cyan-light {
    color: var(--cyan-light);
}



.text-red-dark {
    color: var(--red-dark);
}

.text-red-light {
    color: var(--red-light);
}

.text-yellow-dark {
    color: var(--yellow-dark);
}

.text-yellow-light {
    color: var(--yellow-light);
}

.text-green-dark {
    color: var(--green-dark);
}

.text-green-light {
    color: var(--green-light);
}

.text-orange-dark {
    color: var(--orange-dark);
}

.text-orange-light {
    color: var(--orange-light);
}

.text-brown-dark {
    color: var(--brown-dark);
}

.text-brown-light {
    color: var(--brown-light);
}

.text-purple-dark {
    color: var(--purple-dark);
}

.text-purple-light {
    color: var(--purple-light);
}

Última actualización: Abril 2, 2025