Creado en 07/04/2025 09:40
Web Components Atomic Kit
- Atom Teal#4db6ac
- Module Violet#9575cd
- Shadow DOM Grey#cfd8dc
- Slot Orange#ffb74d
- Element White#ffffff
- Event Black#212121
- Refactor Aqua#80deea
La paleta consta de Luz, Oscuro colores. Colores de acento Slot Orange #ffb74d y Refactor Aqua #80deea. La paleta tiene temperatura de color Frío, Cálido, Neutral.
Por luminosidad, la paleta va de #212121 (más oscuro) a #FFFFFF (más claro). El rango de luminosidad es amplio.
Saturación mixta: algunos colores apagados y acentos más vivos.
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): #212121, #4DB6AC, #80DEEA, #9575CD, #CFD8DC, #FFB74D, #FFFFFF
La paleta Web Components Atomic Kit tiene una combinación de colores de códigos de 7:
HEX: #4db6ac, RGB: (77, 182, 172); HEX: #9575cd, RGB: (149, 117, 205); HEX: #cfd8dc, RGB: (207, 216, 220)
HEX: #ffb74d, RGB: (255, 183, 77); HEX: #ffffff, RGB: (255, 255, 255); HEX: #212121, RGB: (33, 33, 33)
HEX: #80deea, RGB: (128, 222, 234)
Versión simplificada de la paleta de colores
Sombra de lightseagreen, Sombra de mediumpurple, Sombra de lightgrey, Sombra de Naranja, Blanco, Sombra de Negro, Matiz de powderblue
El esquema de color fue creado por colorstudio
Códigos de colores en la paleta
Web Components Atomic Kit códigos de color HEX, información RGB en la tabla
| Color | HEX | RGB | Nombre | nombre alternativo |
| #4db6ac | #4db6ac | RGB(77, 182, 172) | Atom Teal | — |
| #9575cd | #9575cd | RGB(149, 117, 205) | Module Violet | — |
| #cfd8dc | #cfd8dc | RGB(207, 216, 220) | Shadow DOM Grey | — |
| #ffb74d | #ffb74d | RGB(255, 183, 77) | Slot Orange | — |
| #ffffff | #ffffff | RGB(255, 255, 255) | Element White | White |
| #212121 | #212121 | RGB(33, 33, 33) | Event Black | Lead |
| #80deea | #80deea | RGB(128, 222, 234) | Refactor Aqua | — |
Contraste de la paleta de colores
10 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 |
#4db6ac | #9575cd | 1.5 |
#4db6ac | #cfd8dc | 1.68 |
#4db6ac | #ffb74d | 1.41 |
#4db6ac | #80deea | 1.57 |
#cfd8dc | #ffb74d | 1.19 |
#cfd8dc | #ffffff | 1.44 |
Paleta de imágenes Web Components Atomic Kit png
Exportar paleta
Descargue la "Web Components Atomic Kit" en varios formatos para una integración perfecta en sus proyectos de diseño.
Formatos disponibles: