Frontend Developer Toolkit
- NPM Flame#cb3837
- React Sky#61dafb
- Debug Dust#f5f5f5
- Component Graphite#4a4a4a
- Hook Lavender#d6bcfa
- Responsive Teal#00b8a9
Criado em 06/09/2025 16:43
A paleta consiste em cores Semi escuro, Claro. Cores de destaque NPM Flame #cb3837 e Responsive Teal #00b8a9. A paleta tem Quente, Frio, Neutro temperatura de cores.
Em luminosidade, a paleta vai de #4A4A4A (mais escuro) a #F5F5F5 (mais claro). A faixa de luminosidade é ampla.
A saturação global parece vívida (croma alto) — 67% das cores são vívidas.
Algumas cores ficam quase opostas no círculo cromático, dando à paleta um contraste complementar.
No geral, a temperatura tende para o frio (3 de 6).
Códigos HEX (ordenados): #00B8A9, #4A4A4A, #61DAFB, #CB3837, #D6BCFA, #F5F5F5
A paleta Frontend Developer Toolkit combina 6 códigos de cor:
HEX: #cb3837, RGB: (203, 56, 55); HEX: #61dafb, RGB: (97, 218, 251); HEX: #f5f5f5, RGB: (245, 245, 245)
HEX: #4a4a4a, RGB: (74, 74, 74); HEX: #d6bcfa, RGB: (214, 188, 250); HEX: #00b8a9, RGB: (0, 184, 169)
Versão simplificada das cores da paleta
Tom claro de Carmesim, Tom escuro de Azul-céu, Fumaça-branca, Tom escuro de Cinza-fosco, Tom claro de Ameixa, Tom escuro de Verde-mar-claro
O esquema de cores foi criado por colorstudio
Códigos de cores na paleta
Frontend Developer Toolkit códigos de cores HEX, informações RGB na tabela
| Cor | HEX | RGB | Nome | nome alternativo |
|---|---|---|---|---|
| #cb3837 | #cb3837 | RGB(203, 56, 55) | NPM Flame | — |
| #61dafb | #61dafb | RGB(97, 218, 251) | React Sky | — |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Debug Dust | Whitesmoke |
| #4a4a4a | #4a4a4a | RGB(74, 74, 74) | Component Graphite | Gray29 |
| #d6bcfa | #d6bcfa | RGB(214, 188, 250) | Hook Lavender | — |
| #00b8a9 | #00b8a9 | RGB(0, 184, 169) | Responsive Teal | — |
Contraste da paleta de cores
6 pares de cores têm contraste baixo e precisam de melhorias, o que pode afetar a legibilidade.
| Cor do texto | Cor de fundo | Razão de contraste |
|---|---|---|
#cb3837 | #4a4a4a | 1.75 |
#61dafb | #f5f5f5 | 1.48 |
#61dafb | #d6bcfa | 1.03 |
#61dafb | #00b8a9 | 1.53 |
#f5f5f5 | #d6bcfa | 1.54 |
#d6bcfa | #00b8a9 | 1.47 |
Paleta de imagens Frontend Developer Toolkit png
Exportar paleta
Baixe a "Frontend Developer Toolkit" em vários formatos para integração perfeita em seus projetos de design.
Formatos disponíveis: