Design System Component Guide
- Primary Indigo#6366f1
- Secondary Coral#fb7185
- Surface Cream#fff7ed
- Border Fog#f5f5f5
- Text Graphite#1f2937
- Interactive Yellow#fde047
- Muted Gray#cbd5e1
Utworzono 06/28/2025 20:29
Paleta składa się z kolorów Jasny, Ciemny. Kolory akcentujące Primary Indigo #6366f1 i Surface Cream #fff7ed. Paleta ma temperaturę kolorów Zimny, Ciepły, Neutralny.
Według jasności paleta rozciąga się od #1F2937 (najciemniejszy) do #FFF7ED (najjaśniejszy). Zakres jasności jest szeroki.
Nasycenie wydaje się żywe (wysoka chroma) — 57% kolorów jest żywych.
Niektóre kolory leżą niemal naprzeciw siebie na kole barw, co daje palecie kontrast dopełniający.
Ogólna temperatura barw przechyla się ku zimnu (3 z 7).
Kody HEX (posortowane): #1F2937, #6366F1, #CBD5E1, #F5F5F5, #FB7185, #FDE047, #FFF7ED
Paleta Design System Component Guide łączy 7 kodów kolorów:
HEX: #6366f1, RGB: (99, 102, 241); HEX: #fb7185, RGB: (251, 113, 133); HEX: #fff7ed, RGB: (255, 247, 237)
HEX: #f5f5f5, RGB: (245, 245, 245); HEX: #1f2937, RGB: (31, 41, 55); HEX: #fde047, RGB: (253, 224, 71)
HEX: #cbd5e1, RGB: (203, 213, 225)
Uproszczona wersja palety kolorów
Ciemny odcień Średni łupkowy niebieski, Ciemny odcień Jasnokoralowy, Ciemny odcień Kwiatowa biel, Biały dym, Jasny odcień Czarny, Jasny odcień Złoty, Jasny odcień Jasnoszary
Schemat kolorów został stworzony przez raccoon
Kody kolorów w palecie
Design System Component Guide kody kolorów HEX, informacje RGB w tabeli
| Kolor | HEX | RGB | Nazwa | Alternatywna nazwa |
|---|---|---|---|---|
| #6366f1 | #6366f1 | RGB(99, 102, 241) | Primary Indigo | — |
| #fb7185 | #fb7185 | RGB(251, 113, 133) | Secondary Coral | — |
| #fff7ed | #fff7ed | RGB(255, 247, 237) | Surface Cream | Fatback |
| #f5f5f5 | #f5f5f5 | RGB(245, 245, 245) | Border Fog | Whitesmoke |
| #1f2937 | #1f2937 | RGB(31, 41, 55) | Text Graphite | — |
| #fde047 | #fde047 | RGB(253, 224, 71) | Interactive Yellow | — |
| #cbd5e1 | #cbd5e1 | RGB(203, 213, 225) | Muted Gray | — |
Kontrast palety kolorów
8 pary kolorów mają niski kontrast i wymagają poprawy, co może wpłynąć na czytelność.
| Kolor tekstu | Kolor tła | Współczynnik kontrastu |
|---|---|---|
#6366f1 | #fb7185 | 1.65 |
#fb7185 | #cbd5e1 | 1.81 |
#fff7ed | #f5f5f5 | 1.02 |
#fff7ed | #fde047 | 1.24 |
#fff7ed | #cbd5e1 | 1.39 |
#f5f5f5 | #fde047 | 1.2 |
Paleta obrazów Design System Component Guide png
Eksportuj paletę
Pobierz "Design System Component Guide" w różnych formatach, aby bezproblemowo zintegrować ją z projektami graficznymi.
Dostępne formaty: