PL

Mieszanie kolorów

To narzędzie służy do mieszania kolorów i od razu podaje kolor wynikowy w HEX, RGB i HSL. Można też rozjaśnić, przyciemnić lub stonować kolor i utworzyć gradient o maksymalnie 15 stopniach.

Źródło: CSS Color 5, W3C – CSS Color Module Level 5: color-mix(). Stan na: .

HEX, np. #E63946, rgb(230, 57, 70) lub hsl(...)
HEX, rgb() lub hsl()
%
0 % = tylko kolor 1, 100 % = tylko kolor 2; przy rozjaśnianiu: udział bieli
od 2 do 15 kolorów od koloru 1 do koloru docelowego
Moje narzędziaWpisane dane są zapisywane tylko w tej przeglądarce.

Kolor wynikowy

#965A72rgb(150, 90, 114) · hsl(336, 25%, 47%)
  • 1/5#E63946
  • 2/5#BE4A5C
  • 3/5#965A72
  • 4/5#6D6B87
  • 5/5#457B9D

Wynik

Kolor wynikowy (HEX)
#965A72
RGB
rgb(150, 90, 114)
HSL
hsl(336, 25%, 47%)
CSS (color-mix)
color-mix(in srgb, #E63946 50%, #457B9D 50%)
Stopnie gradientu
  • #E63946
  • #BE4A5C
  • #965A72
  • #6D6B87
  • #457B9D

Jak to obliczamy

Narzędzie miesza kolory ekranowe, czyli wartości światła – nie farby z pigmentów. Dlatego czerwony i niebieski dają fiolet (#800080), a niebieski i żółty neutralną szarość, a nie zieleń jak w akwarelach.

Jak odbywa się mieszanie

Dla każdego kanału koloru obliczana jest wartość pośrednia. Sposób określa przestrzeń mieszania:

Rozjaśnianie, przyciemnianie, tonowanie

Zmieszany z bielą kolor się rozjaśnia (tint), z czernią ciemnieje (shade), a z szarością staje się bardziej stonowany (tone). Procent reguluje siłę, a stopnie dają całą serię – przydatną na przykład dla stanów po najechaniu myszą lub skal kolorów.

Wyrażenie color-mix() można skopiować prosto do arkusza stylów. Pasujące palety tworzy generator palety kolorów, formaty zamienia konwerter kolorów, a sprawdzanie kontrastu pilnuje czytelności tekstu.

Najczęściej zadawane pytania

Co wyjdzie z zmieszania niebieskiego i żółtego?

Na ekranie neutralna szarość (średnia sRGB #808080), bo miesza się kolory światła. W farbach akwarelowych lub akrylowych niebieski z żółtym daje zielony, ponieważ pigmenty działają odejmująco.

Jak zmieszać dwa kolory po równo?

Wpisz oba kolory i zostaw udział drugiego koloru na 50 %. Dla jednej trzeciej koloru 2 wpisz 33.

Jak rozjaśnić lub przyciemnić kolor?

Wybierz „Rozjaśnić kolor” albo „Przyciemnić kolor” i ustaw procent: przy 20 % bieli kolor lekko jaśnieje, przy 80 % jest prawie biały.

Którą przestrzeń mieszania wybrać?

sRGB odpowiada domyślnemu zachowaniu CSS i większości programów. Oklab daje równomierniejsze gradienty, a światło liniowe odpowiada nakładającym się źródłom światła.

Jak użyć wyniku w CSS?

Skopiuj wartość z pola „CSS (color-mix)” i użyj jej jako koloru w każdej nowoczesnej przeglądarce albo weź po prostu wartość HEX.

Źródła i podstawa prawna

Stan na: · Zasady redakcyjne

Podobne narzędzia