Wgląd w kod koloru #326C81

Wszystkie konwersje, harmonie i kontrole dostępności, których potrzebujesz, aby projektować z pewnością.

RGB:rgb(50, 108, 129)
HSL:hsl(196, 44%, 35%)
Wybierz kolor z obrazkuWybierający kolorów
HEX
#326C81
RGB
50, 108, 129
HSL
196°, 44%, 35%
HSV
196°, 61%, 51%
CMYK
61%, 16%, 0%, 49%

Konwersja kolorów

Generuj wartości w wielu modelach kolorów w jednym miejscu.

#326C81

≈ Stalowy Niebieski

Karty kolorów referencyjnych

Niższe ΔE oznacza bliższe dopasowanie wizualne

Odcienie i cienie

Sprawdź, jak #326C81 zachowuje się po zmieszaniu z bielą lub czernią. Te próbki są idealne do stanów najechania, cieni i tła.

Najedź kursorem, aby skopiować dowolną wartość szesnastkową i użyć jej ponownie w swoim interfejsie.

Cienie

0–100%
0%#326C81
10%#2D6174
20%#285667
30%#234B5A
40%#1E414D
50%#193640
60%#142B33
70%#0F2027
80%#0A161A
90%#050B0D
100%#000000

Odcienie

0–100%
0%#326C81
10%#3B8098
20%#4594B0
30%#58A3BE
40%#70B0C7
50%#88BDD1
60%#A0CADA
70%#B7D7E3
80%#CFE5EC
90%#E7F2F6
100%#FFFFFF

Typowe zastosowania

  • Stany komponentów UI (najechanie, aktywny, wyłączony)
  • Tworzenie głębi za pomocą cieni i świateł
  • Budowanie spójnych systemów kolorów

System projektowania

Wskazówka dotycząca systemu projektowania

Te warianty stanowią podstawę spójnej palety. Eksportuj je, aby utrzymać zgodność między marketingiem, produktem i inżynierią.

Eksportuj paletę

Harmonie kolorów

Błyskawicznie twórz zrównoważone palety za pomocą harmonii wygenerowanych z #326C81.

Kliknij dowolną próbkę, aby otworzyć jej własną stronę szczegółów i kontynuować eksplorację.

Jak używać

Wybierz jeden dominujący kolor, a następnie pozwól, aby wspierające odcienie działały jako akcenty dla typografii, powierzchni i przycisków wezwania do działania.

Dlaczego to ma znaczenie

Zrównoważone harmonie komunikują zamiar – spokój, energię, prestiż – bez przytłaczania układu.

Komplementarne

Przeciwne odcienie, które tworzą efekt i odważny kontrast.

Najlepsze dla

Wysoce efektowne CTA, logotypy i sekcje hero

Analogiczne

Sąsiadujące odcienie dla naturalnych, płynnych gradientów.

Najlepsze dla

Spokojne pulpity inspirowane naturą

Triadyczne

Trzy równomiernie rozmieszczone odcienie dla zabawnej równowagi.

Najlepsze dla

Zabawny branding i układy redakcyjne

Tetradowe

Dwie pary komplementarne, które zapewniają bogatą różnorodność.

Najlepsze dla

Ilustracje i eksperymenty marketingowe

Monochromatyczne

Jaśniejsze i ciemniejsze rodzeństwo w tej samej rodzinie odcieni.

Najlepsze dla

Minimalistyczne interfejsy i stany premium UI

Kontrast dostępności

Sprawdź, jak czytelny jest #326C81 z popularnymi kolorami tekstu, aby każdy odwiedzający miał wyraźne wrażenia.

Użyj AA jako podstawy dla tekstu głównego i AAA dla najwyższej dostępności.

Przykładowy tekst na czarny tekst
Kolor tekstu#000000
Tło#326C81
Współczynnik kontrastu3.60:1
Poziom WCAGFail
Przykładowy tekst na biały tekst
Kolor tekstu#FFFFFF
Tło#326C81
Współczynnik kontrastu5.84:1
Poziom WCAGAA
Zalecany podgląd tekstu
Kolor tekstu#FFFFFF
Tło#326C81
Współczynnik kontrastu5.84:1
Poziom WCAGAA

Formaty techniczne

Odblokuj profesjonalne przestrzenie kolorów, takie jak XYZ, LAB, warianty CMYK i profile gotowe do eksportu.

Zarejestruj się za darmo

Formaty praktyczne

Uzyskaj symulacje druku, mapowania LED i kolejności bajtów gotowe dla programistów.

Zarejestruj się za darmo

Analiza kolorów

Zagłęb się w dane spektralne, raporty dominacji i zaawansowaną analitykę.

Zarejestruj się za darmo

Symulator ślepoty barw

Podgląd, jak #326C81 wygląda w przypadku typowych niedoborów widzenia kolorów.

Zarejestruj się za darmo

Aspekty kreatywne

Poznaj skojarzenia sezonowe, sygnały emocjonalne i naturalne występowanie.

Zarejestruj się za darmo

Wskazówki projektowe

Równowaga

Traktuj #326C81 jako akcent. Połącz go z neutralnymi kolorami i jednym wspierającym odcieniem, aby uniknąć przeciążenia wizualnego.

Kontrast

Testuj kombinacje z rzeczywistą treścią. Wyższy kontrast poprawia skanowanie, czytelność i konwersje.

Harmonia

Użyj jaśniejszych odcieni dla powierzchni, koloru bazowego dla elementów podstawowych i ciemniejszych cieni dla stanów najechania lub wciśnięcia.

Potrzebujesz innego koloru?

Wróć do próbnika kolorów, aby przesłać obrazy, generować palety i odkrywać nowe relacje kolorystyczne.

Otwórz próbnik kolorów