Frontend Design System
- Build Lavender#d5ccff
- Commit Red#ff595e
- Deploy Silver#d8d9da
- Live View Indigo#3f3d56
- Push Orange#ff9b54
- Sandbox Cream#f9f9f9
Utworzono 06/16/2025 20:05
Paleta składa się z kolorów Jasny, Półciemny. Kolory akcentujące Build Lavender #d5ccff i Push Orange #ff9b54. Paleta ma temperaturę kolorów Zimny, Ciepły, Neutralny.
Według jasności paleta rozciąga się od #3F3D56 (najciemniejszy) do #F9F9F9 (najjaśniejszy). Zakres jasności jest szeroki.
Nasycenie jest mieszane — 3 stonowanych i 3 żywych z 6 kolorów.
Zróżnicowana paleta: jej odcienie rozkładają się na około 140° koła barw.
Ciepłe i zimne próbki są dość zrównoważone (2 ciepłych, 2 zimnych).
Kody HEX (posortowane): #3F3D56, #D5CCFF, #D8D9DA, #F9F9F9, #FF595E, #FF9B54
Paleta Frontend Design System łączy 6 kodów kolorów:
HEX: #d5ccff, RGB: (213, 204, 255); HEX: #ff595e, RGB: (255, 89, 94); HEX: #d8d9da, RGB: (216, 217, 218)
HEX: #3f3d56, RGB: (63, 61, 86); HEX: #ff9b54, RGB: (255, 155, 84); HEX: #f9f9f9, RGB: (249, 249, 249)
Uproszczona wersja palety kolorów
Jasny odcień Ostowy, Ciemny odcień Łososiowy, Ciemny odcień Gainsboro, Ciemny odcień Ciemny łupkowy niebieski, Ciemny odcień Piaskowy brąz, Jasny odcień Biały dym
Schemat kolorów został stworzony przez raccoon
Kody kolorów w palecie
Frontend Design System kody kolorów HEX, informacje RGB w tabeli
| Kolor | HEX | RGB | Nazwa | Alternatywna nazwa |
|---|---|---|---|---|
| #d5ccff | #d5ccff | RGB(213, 204, 255) | Build Lavender | — |
| #ff595e | #ff595e | RGB(255, 89, 94) | Commit Red | — |
| #d8d9da | #d8d9da | RGB(216, 217, 218) | Deploy Silver | — |
| #3f3d56 | #3f3d56 | RGB(63, 61, 86) | Live View Indigo | — |
| #ff9b54 | #ff9b54 | RGB(255, 155, 84) | Push Orange | — |
| #f9f9f9 | #f9f9f9 | RGB(249, 249, 249) | Sandbox Cream | Doctor |
Kontrast palety kolorów
7 pary kolorów mają niski kontrast i wymagają poprawy, co może wpłynąć na czytelność.
| Kolor tekstu | Kolor tła | Współczynnik kontrastu |
|---|---|---|
#d5ccff | #d8d9da | 1.06 |
#d5ccff | #ff9b54 | 1.38 |
#d5ccff | #f9f9f9 | 1.43 |
#ff595e | #ff9b54 | 1.47 |
#d8d9da | #ff9b54 | 1.47 |
#d8d9da | #f9f9f9 | 1.34 |
Paleta obrazów Frontend Design System png
Eksportuj paletę
Pobierz "Frontend Design System" w różnych formatach, aby bezproblemowo zintegrować ją z projektami graficznymi.
Dostępne formaty: