El 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 ocre amarillo y el amarillo amarronado. 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.
El ocre se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código Hex: #CC7722
- Valor RGB: 80.0% rojo, 46.7% verde, 13.3% azul
Las consideraciones de accesibilidad juegan un papel crucial en las elecciones de color de diseño UX y UI. Figma ofrece plugins en la Comunidad para asegurarse de que tus diseños cumplan con las Pautas de Accesibilidad de Contenidos Web.
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 ocre amarillo, 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 de arte clásicas.
- Crema (#FDFBD4): Este tono suave y neutral ofrece un fondo suave 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 de artistas.
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 de artista 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 protagonismo a los tonos cálidos y terrosos del ocre, creando una vibra discordante.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Azul Especiado
Cielos del Desierto
Ascua Viva
Comprobador de contraste
Contraste 3,37
- Texto largo
#CC7722
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Aprobar | Desaprobar | |
Aprobar | Desaprobar |
Contraste 6,23
- Texto largo
#CC7722
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Desaprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #CC7722, también llamado 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) |