Product Engineering Design System
- Blueprint Azure#1c6ed5
- Component Sky#6fb1fc
- Interaction Mint#5fe3c0
- Divider Fog#e4e7ec
- Primary Ink#101828
- Highlight Apricot#ffb703
Utworzono 01/22/2026 09:04
Paleta składa się z kolorów Półciemny, Jasny, Ciemny. Kolory akcentujące Component Sky #6fb1fc i Highlight Apricot #ffb703. Paleta ma temperaturę kolorów Zimny, Neutralny, Ciepły.
Według jasności paleta rozciąga się od #101828 (najciemniejszy) do #E4E7EC (najjaśniejszy). Zakres jasności jest szeroki.
Nasycenie wydaje się żywe (wysoka chroma) — 67% 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 (4 z 6).
Kody HEX (posortowane): #101828, #1C6ED5, #5FE3C0, #6FB1FC, #E4E7EC, #FFB703
Paleta Product Engineering Design System łączy 6 kodów kolorów:
HEX: #1c6ed5, RGB: (28, 110, 213); HEX: #6fb1fc, RGB: (111, 177, 252); HEX: #5fe3c0, RGB: (95, 227, 192)
HEX: #e4e7ec, RGB: (228, 231, 236); HEX: #101828, RGB: (16, 24, 40); HEX: #ffb703, RGB: (255, 183, 3)
Uproszczona wersja palety kolorów
Ciemny odcień Królewski niebieski, Jasny odcień Chabrowy, Jasny odcień Średnia akwamaryna, Ciemny odcień Błękit Alicji, Jasny odcień Czarny, Jasny odcień Pomarańczowy
Schemat kolorów został stworzony przez colorstudio
Kody kolorów w palecie
Product Engineering Design System kody kolorów HEX, informacje RGB w tabeli
| Kolor | HEX | RGB | Nazwa | Alternatywna nazwa |
|---|---|---|---|---|
| #1c6ed5 | #1c6ed5 | RGB(28, 110, 213) | Blueprint Azure | — |
| #6fb1fc | #6fb1fc | RGB(111, 177, 252) | Component Sky | — |
| #5fe3c0 | #5fe3c0 | RGB(95, 227, 192) | Interaction Mint | — |
| #e4e7ec | #e4e7ec | RGB(228, 231, 236) | Divider Fog | — |
| #101828 | #101828 | RGB(16, 24, 40) | Primary Ink | — |
| #ffb703 | #ffb703 | RGB(255, 183, 3) | Highlight Apricot | — |
Kontrast palety kolorów
6 pary kolorów mają niski kontrast i wymagają poprawy, co może wpłynąć na czytelność.
| Kolor tekstu | Kolor tła | Współczynnik kontrastu |
|---|---|---|
#6fb1fc | #5fe3c0 | 1.41 |
#6fb1fc | #e4e7ec | 1.8 |
#6fb1fc | #ffb703 | 1.28 |
#5fe3c0 | #e4e7ec | 1.27 |
#5fe3c0 | #ffb703 | 1.1 |
#e4e7ec | #ffb703 | 1.4 |
Paleta obrazów Product Engineering Design System png
Eksportuj paletę
Pobierz "Product Engineering Design System" w różnych formatach, aby bezproblemowo zintegrować ją z projektami graficznymi.
Dostępne formaty: