Creado en 06/17/2025 12:06
Component-Based Design System
- Atomic Rose#ffb4c7
- Reusable Indigo#7161ef
- Token Clay#d6d1cb
- Style Guide Aqua#64dfdf
- Hierarchy Coal#222426
- Sketchpad Linen#fdf7f2
La paleta consta de Luz, Oscuro colores. Colores de acento Atomic Rose #ffb4c7 y Style Guide Aqua #64dfdf. La paleta tiene temperatura de color Cálido, Frío, Neutral.
Por luminosidad, la paleta va de #222426 (más oscuro) a #FDF7F2 (más claro). El rango de luminosidad es amplio.
La saturación global se siente viva (croma alto).
Algunos pares de matices están cerca de posiciones complementarias — puede leerse como contraste complementario (heurística).
En conjunto, la temperatura de color tiende al frío.
Códigos HEX (ordenados): #222426, #64DFDF, #7161EF, #D6D1CB, #FDF7F2, #FFB4C7
La paleta Component-Based Design System tiene una combinación de colores de códigos de 6:
HEX: #ffb4c7, RGB: (255, 180, 199); HEX: #7161ef, RGB: (113, 97, 239); HEX: #d6d1cb, RGB: (214, 209, 203)
HEX: #64dfdf, RGB: (100, 223, 223); HEX: #222426, RGB: (34, 36, 38); HEX: #fdf7f2, RGB: (253, 247, 242)
Versión simplificada de la paleta de colores
Matiz de lightpink, Matiz de mediumslateblue, Matiz de lightgrey, Sombra de mediumturquoise, Sombra de Negro, Matiz de floralwhite
El esquema de color fue creado por colorscheme
Códigos de colores en la paleta
Component-Based Design System códigos de color HEX, información RGB en la tabla
| Color | HEX | RGB | Nombre | nombre alternativo |
| #ffb4c7 | #ffb4c7 | RGB(255, 180, 199) | Atomic Rose | — |
| #7161ef | #7161ef | RGB(113, 97, 239) | Reusable Indigo | — |
| #d6d1cb | #d6d1cb | RGB(214, 209, 203) | Token Clay | — |
| #64dfdf | #64dfdf | RGB(100, 223, 223) | Style Guide Aqua | — |
| #222426 | #222426 | RGB(34, 36, 38) | Hierarchy Coal | — |
| #fdf7f2 | #fdf7f2 | RGB(253, 247, 242) | Sketchpad Linen | — |
Contraste de la paleta de colores
6 pares de colores tienen un contraste bajo y necesitan mejoras, lo que puede afectar la legibilidad.
| Color de texto | Color de fondo | Relación de contraste |
#ffb4c7 | #d6d1cb | 1.09 |
#ffb4c7 | #64dfdf | 1.04 |
#ffb4c7 | #fdf7f2 | 1.56 |
#d6d1cb | #64dfdf | 1.05 |
#d6d1cb | #fdf7f2 | 1.42 |
#64dfdf | #fdf7f2 | 1.5 |
Paleta de imágenes Component-Based Design System png
Exportar paleta
Descargue la "Component-Based Design System" en varios formatos para una integración perfecta en sus proyectos de diseño.
Formatos disponibles: