El naranja pastel es un tono más claro y pálido del naranja puro. Transmite el mismo calor y energía que el naranja, pero de una manera menos intensa. El naranja pastel tiene baja saturación, lo que significa que el pigmento de naranja puro se mezcla con blanco o gris para crear un color más suave y menos vibrante. Este tono de naranja claro evoca la paz de un suave atardecer en una noche de verano.
El naranja pastel se define por los siguientes códigos y valores de color para asegurar la consistencia en varias plataformas y dispositivos digitales.
- Código HEX: #FFC067
- Valor RGB: 100% rojo, 75.3% verde y 40.4% 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.
Aquí hay algunas formas de usar el naranja pastel en tus diseños:
- Evocar sentimientos de relajación. La suavidad del naranja pastel evoca calidez y serenidad, lo que lo hace perfecto para aplicaciones o sitios web de bienestar, viajes o sociales.
- Llamar la atención sobre elementos. El naranja pastel no es audaz, pero aún puedes usarlo para destacar elementos específicos en tu diseño de UI, incluidos botones o CTAs.
- Crear contraste. Dado que el naranja pastel es claro, combina bien con colores más oscuros como gris oscuro o negro para crear contraste entre el texto y el fondo.
Ten en cuenta que el color y su significado pueden cambiar de una cultura a otra, y en cualquier momento. Si estás diseñando para una audiencia global, investiga las consideraciones de color para tus regiones específicas.
Para variaciones dentro del mismo espectro claro que el naranja pastel, considera:
- Naranja claro (#FFDBBB) es un vecino del naranja pastel en la rueda de colores, lo que crea un tono claro y alegre.
- Amarillo pastel (#FFEE8C) comparte los mismos tonos pálidos y apagados que el naranja pastel, pero en la versión amarilla.
- Melocotón (#FFD3AC) tiene una apariencia armoniosa similar al naranja pastel pero con una mezcla de amarillo.
- Coral (#FF8559) es un tono rosa-naranja saturado que irradia la diversión del naranja pastel.
Para complementar el encanto del naranja pastel, considera combinarlo con:
- Crema (#FDFBD4) proporciona una base limpia y calmada, permitiendo que el naranja pastel brille.
- Verde menta (#ADEBB3) crea una atmósfera tranquila y serena para igualar las cualidades de relajación del naranja pastel.
- Coral (#FF8559) complementa la calidez y alegría del naranja pastel para crear diseños divertidos pero acogedores.
- Verde azulado (#069494) ayuda a crear una sensación moderna o energética con su audacia––asegúrate de usarlo con moderación para evitar sobrecargar la ligereza del naranja pastel.
Otros colores que vale la pena considerar incluyen gris frío para un aspecto suave y equilibrado, amarillo pastel para realzar la alegría, y azul pastel para igualar la tranquilidad de la ligereza del naranja pastel.
Aunque el naranja pastel es alegre, puede chocar con:
- Escarlata (#ED2100) puede crear un contraste discordante junto a la suavidad del naranja pastel.
- Azul marino (#000080) es un tono profundo que crea un contraste fuerte contra la calidez del naranja pastel.
- Blanco (#FFFFFF) crea un contraste marcado que puede abrumar la ligereza del naranja pastel.
- Marrón (#895129) crea una apariencia turbia y desarticulada cuando se combina con el naranja pastel.
El naranja pastel simboliza la suavidad, calidez y creatividad. La naturaleza suave del naranja pastel se asocia con nuevos comienzos y una sensación de seguridad.
En la psicología del color, las cualidades calmantes y nutritivas del naranja pastel evocan sentimientos de relajación, optimismo y estimulación suave, similar a un atardecer de verano.
Para el diseño UI/UX, el naranja pastel ofrece accesibilidad. Cuando se usa para resaltar elementos o construir una interfaz amigable para el usuario, el naranja pastel añade un toque de calma.
El naranja pastel no tiene una historia documentada extensa en comparación con otros colores como el malva o el carmesí. Los colores pastel son versiones apagadas de colores existentes y no fueron prevalentes hasta los siglos XVIII o XIX.
Curiosamente, la palabra "naranja" en realidad proviene de la fruta misma, no al revés. No fue hasta finales del siglo XVI que "naranja" comenzó a usarse como término de color. Antes de eso, la gente usaba frases descriptivas como "amarillo-rojo" para referirse a este tono específico.
Hoy en día, el naranja pastel se usa al diseñar productos para evocar paz, calma y una atmósfera relajante.
Variantes de color
Sombras
Tintes
Tonos
Tonalidades
Armonías de color
Complementaria
Complementaria dividida
Monocromática
Análoga
Triádica
Square
Paletas personalizadas
Arroyo de Piedra Arenisca
Playas de California
Atardecer de Azafrán
Comprobador de contraste
Contraste 1,62
- Texto largo
#FFC067
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar | |
Desaprobar | Desaprobar |
Contraste 12,99
- Texto largo
#FFC067
- Texto normal
Cómo diseñas, alineas, y desarrollas importa. Hazlo con Figma.
| Categoría | ||
|---|---|---|
Aprobar | Aprobar | |
Aprobar | Aprobar | |
Aprobar | Aprobar |
Simulaciones de color
Protanopia
Deuteranopia
Tritanopia
Acromatopsia
El color hexadecimal #ffc067, también llamado Naranja Pastel, tiene valores RGB de R:255, G:192, B:103 y valores CMYK de C:0, M:25, Y:60, K:0.
| VALUE | CSS | |
|---|---|---|
| HEX | #ffc067 | #ffc067 |
| RGB DECIMAL | 255, 192, 103 | RGB(255,192,103) |
| RGB PERCENTAGE | 100.0, 75.3, 40.4 | RGB(100.0%,75.3%,40.4%) |
| CMYK | 0, 25, 60, 0 | |
| HSL | HSL(35.1, 100.0%, 70.2%) | HSL(35.1, 100.0%, 70.2%) |
| HSV (OR HSB) | 35.1°, 59.6, 100.0 | |
| WEB SAFE | #255204102 | #255204102 |
| BINARY | 11111111, 11000000, 01100111 | |
| iOS - SwiftUI | Color(red: 1.000, green: 0.753, blue: 0.404) | |
| iOS - UIKit | UIColor(red: 1.000, green: 0.753, blue: 0.404, alpha: 1) | |
| Android - Compose | Color(0xFFFFC067) |