Ocre, un color cálido y terroso, se sitúa entre el amarillo y el marrón en la rueda de colores. Este tono similar a la arcilla sugiere pigmentos naturales y tonos rústicos, con matices como el amarillo ocre y el amarillo parduzco. Es ideal para añadir una sensación de solidez y atemporalidad a los diseños, perfecto para evocar una atmósfera natural y acogedora.
Ocre se define por los siguientes códigos y valores de color para asegurar la consistencia en diversas plataformas y dispositivos digitales.
- Código Hex: #CC7722
- Valor RGB: 80.0% rojo, 46.7% verde, 13.3% azul
La accesibilidad juega un papel clave en la elección de colores en el diseño UX y UI. La comunidad de Figma ofrece plugins para ayudarte a cumplir con las Web Content Accessibility Guidelines.
Para variaciones dentro del mismo espectro que el ocre, considera:
- Amarillo mostaza (#ffce1b): El amarillo mostaza comparte un tono cálido y terroso con el ocre, encarnando la profundidad iluminada por el sol que se encuentra en los pigmentos naturales de ocre.
- Azafrán (#f1c338): Con su tono especiado y rústico, el azafrán captura el espíritu amarillento del ocre, evocando un aura de calidez y tradición.
- Oro (#efbf04): El oro proporciona una versión brillante de los tonos terrosos del ocre, ofreciendo un tono cálido similar pero con un brillo metálico que sugiere luminosidad.
- Amarillo oscuro (#ba8e23): El amarillo oscuro aporta un enfoque más profundo y apagado al color amarillo ocre, reflejando la sensación envejecida y orgánica de la arcilla y los tonos terrosos.
Para complementar el ocre, considera emparejarlo con:
- Verde bosque (#2E6F40): Este tono rico y terroso proporciona un contraste llamativo con la calidez del ocre, creando una paleta equilibrada e inspirada en la naturaleza.
- Burdeos (#660033): El tono profundo y sofisticado del burdeos realza el ocre, resultando en un aspecto lujoso y acogedor que se siente tanto audaz como sólido.
- Azul pizarra (#557C99): El ocre combina maravillosamente con el azul pizarra, con la frescura del azul equilibrando los tonos cálidos y terrosos del ocre, recordando las paletas clásicas de arte.
- Crema (#FDFBD4): Este tono suave y neutral ofrece un fondo gentil y discreto, permitiendo que la vibrante calidez amarillenta del ocre destaque.
- Verde oliva (#636B2F): Al reflejar los pigmentos naturales del ocre, el verde oliva crea una paleta terrosa y armoniosa ideal para proyectos inspirados en paletas artísticas.
Aunque el ocre es un tono cálido y terroso, puede chocar con:
- Amarillo brillante (#FFED29): La alta intensidad del amarillo brillante puede dominar los tonos más sutiles y amarillentos del ocre.
- Rosa neón (#FF13F0): La vivacidad del rosa neón puede resultar visualmente chocante contra el ocre, interrumpiendo una paleta artística cohesiva.
- Naranja sangre (#FF4B33): El naranja sangre, con sus tonos oxidados audaces, puede crear un contraste desequilibrado con los matices más suaves del ocre.
- Chartreuse (#CCFF00): La calidad eléctrica del chartreuse puede eclipsar la calidez natural del ocre, llevando a tensiones en los arreglos de la rueda de colores.
- Azul cielo (#82C8E5): El azul cielo, siendo un tono más frío, puede restar valor a los tonos cálidos y terrosos del ocre, creando una vibra discordante.
Variantes de color
Sombras
Tintes
Tonos
Matices
Armonías de color
Complementario
Dividido
Monocromático
Análogo
Triádico
Cuadrado
Paletas personalizadas
Azul especiado
Cielos del desierto
Brasa vívida
Verificador de contraste
Contraste 3,37
- Texto grande
#CC7722
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Desaprobado | Desaprobado | |
Aprobado | Desaprobado | |
Aprobado | Desaprobado |
Contraste 6,23
- Texto grande
#CC7722
- Texto normal
Tu forma de diseñar, alinear y crear importa. Hazlo todo con Figma.
| Categoría | ||
|---|---|---|
Aprobado | Desaprobado | |
Aprobado | Aprobado | |
Aprobado | Aprobado |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #CC7722, también conocido como Ocre, tiene valores RGB de R:204, G:119, B:34 y valores CMYK de C:0, M:42, Y:83, K:20.
| VALUE | CSS | |
|---|---|---|
| HEX | #CC7722 | #CC7722 |
| RGB DECIMAL | 204, 119, 34 | RGB(204,119,34) |
| RGB PERCENTAGE | 80.0, 46.7, 13.3 | RGB(80.0%,46.7%,13.3%) |
| CMYK | 0, 42, 83, 20 | |
| HSL | HSL(30.0, 71.4%, 46.7%) | HSL(30.0, 71.4%, 46.7%) |
| HSV (OR HSB) | 30.0°, 83.3, 80.0 | |
| WEB SAFE | #20410251 | #20410251 |
| BINARY | 11001100, 01110111, 00100010 | |
| iOS - SwiftUI | Color(red: 0.800, green: 0.467, blue: 0.133) | |
| iOS - UIKit | UIColor(red: 0.800, green: 0.467, blue: 0.133, alpha: 1) | |
| Android - Compose | Color(0xFFCC7722) |
