Wgląd w kod koloru #334580

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

RGB:rgb(51, 69, 128)
HSL:hsl(226, 43%, 35%)
Wybierz kolor z obrazkuWybierający kolorów
HEX
#334580
RGB
51, 69, 128
HSL
226°, 43%, 35%
HSV
226°, 60%, 50%
CMYK
60%, 46%, 0%, 50%

Konwersja kolorów

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

#334580

≈ Stalowy Niebieski

Karty kolorów referencyjnych

Niższe ΔE oznacza bliższe dopasowanie wizualne

Odcienie i cienie

Sprawdź, jak #334580 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%#334580
10%#2E3E73
20%#293766
30%#243059
40%#1F294D
50%#192240
60%#141C33
70%#0F1526
80%#0A0E1A
90%#05070D
100%#000000

Odcienie

0–100%
0%#334580
10%#3C5297
20%#465EAF
30%#5970BD
40%#7185C6
50%#8899D0
60%#A0ADD9
70%#B8C2E3
80%#D0D6EC
90%#E7EBF6
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 #334580.

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 #334580 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#334580
Współczynnik kontrastu2.30:1
Poziom WCAGFail
Przykładowy tekst na biały tekst
Kolor tekstu#FFFFFF
Tło#334580
Współczynnik kontrastu9.12:1
Poziom WCAGAAA
Zalecany podgląd tekstu
Kolor tekstu#FFFFFF
Tło#334580
Współczynnik kontrastu9.12:1
Poziom WCAGAAA

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 #334580 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 #334580 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