Color Beige: código #F5F5DC

Beige

#F5F5DC

Códigos del color

  • HEX#F5F5DC
  • RGBrgb(245, 245, 220)
  • HSLhsl(60, 56%, 91%)
  • HSVhsv(60, 10%, 96%)
  • CMYKcmyk(0%, 0%, 10%, 4%)
  • LABlab(96% -4.2 12.1)
  • OKLCHoklch(96.4% 0.033 107)

Sobre el color Beige

Beige tiene el código HEX #F5F5DC, que corresponde a rgb(245, 245, 220) en el modelo RGB. En el círculo cromático, su tono está en 60°, con 56% de saturación y 91% de luminosidad (hsl(60, 56%, 91%)).

Por su tono se percibe como un color cálido: suele transmitir energía y cercanía y «avanza» visualmente en la composición.

Como fondo pide texto oscuro: el negro alcanza un contraste de 18,97:1 sobre él, frente a 1,10:1 del blanco.

Para impresión, la conversión aproximada es cmyk(0%, 0%, 10%, 4%). Confírmala siempre con el perfil de color de la imprenta, porque el resultado depende del papel y la tinta.

Tonos más claros

Tonos más oscuros

Combinaciones con Beige

Complementaria

#F5F5DC · #DBDBF5

Análoga

#F5E8DB · #F5F5DC · #E8F5DB

Tríada

#F5F5DC · #DBF5F5 · #F5DBF5

Tetrádica

#F5F5DC · #DBF5E8 · #DBDBF5 · #F5DBE8

Complementaria dividida

#F5F5DC · #DBE8F5 · #E8DBF5

Monocromática

#D9D978 · #EAEAB3 · #F5F5DC · #FFFFFF · #FFFFFF

Beige con texto blanco y negro

Texto blanco Aa Bb Cc 123
1,10:1 · no cumple WCAG
Texto negro Aa Bb Cc 123
18,97:1 · AAA

Prueba otras combinaciones en el verificador de contraste

Si llegaste buscando “el beige de la pared de mi sala”, conviene un aviso: el beige de la web, #F5F5DC, es bastante más claro y ligeramente verdoso que el beige que la mayoría imagina. Nació como color con nombre del sistema X11 y lo heredó CSS, donde beige es exactamente este tono de papel antiguo. El beige cotidiano, el del lino, la arena o el cartón, suele ser más cálido y oscuro, algo cercano a #D8C3A5 o al tan de CSS (#D2B48C).

Un neutro con temperatura

El beige casi siempre se percibe como neutro, discreto y acogedor. En moda y decoración es sinónimo de estilo clásico, “minimalismo cálido” y tejidos naturales como el lino y el algodón crudo. Para algunas personas, sin embargo, resulta soso o anticuado: la percepción depende de la generación, la cultura y de si el color va solo o acompañado. Con texturas y materiales naturales gana profundidad; como relleno plano en pantalla puede parecer un blanco sucio.

Usos que funcionan

Con qué combinarlo

Contraste: siempre texto oscuro

Con una luminancia altísima, #F5F5DC tiene un contraste de apenas 1,1:1 con el blanco, así que el texto blanco sobre beige es prácticamente invisible. Usa texto negro, gris marengo o marrón oscuro. Además, el beige sobre blanco apenas se distingue, por lo que conviene separar las áreas con bordes o sombras. En modo oscuro, cambia el fondo beige por un marrón grisáceo profundo y reserva el beige para el texto. Revisa tus combinaciones en el verificador de contraste y descubre en qué se diferencia del nude y del crema en sus páginas.

Cómo usarlo en CSS

:root {
  --color-beige: #F5F5DC;
  --color-beige-rgb: 245, 245, 220;
}

.elemento {
  background-color: var(--color-beige);
  color: #000000;
}

Colores parecidos

Usa Beige en nuestras herramientas