logo
GeekFormat

Konwerter kolorów

最接近的 CSS 颜色名: mediumseagreen

RGB

R
G
B
A

HSL

H
S
L

HSV

H
S
V
HEX#22c55e
RGBrgb(34, 197, 94)
RGBArgba(34, 197, 94, 1)
HSLhsl(142, 71%, 45%)
HSLAhsla(142, 71%, 45%, 1)
HSVhsv(142, 83%, 77%)
HWBhwb(142, 13%, 23%)
CMYKcmyk(83%, 0%, 52%, 23%)
XYZxyz(22.64, 41.08, 17.32)
LABlab(70, -62, 40)
LCHlch(70, 74, 147)
OKLABoklab(1, 0, 0)
OKLCHoklch(1, 0, 180)

WCAG 对比度检查

白字
2.28:1
AA ✗AAA ✗
黑字
9.22:1
AA ✓AAA ✓

Internetowy konwerter kolorów obsługujący konwersję jednym kliknięciem między 14 formatami kolorów, w tym HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB i OKLCH. Zawiera wbudowany próbnik kolorów do dostosowywania w czasie rzeczywistym, sprawdzanie kontrastu WCAG, schematy harmonii kolorów, generowanie odcieni, konwersję wsadową i ekstrakcję kolorów z obrazów. Wszystkie obliczenia działają w całości lokalnie w przeglądarce — przesyłanie plików nie jest wymagane, idealne dla projektantów i frontend developerów.

Powiązane Rekomendacje

Symulator daltonizmu

Filtry do zdjęć

CSS Formatter

Konwerter jednostek

Konwerter walut

Konwerter obrazów

Przypadki użycia

  • Konwertowanie wartości HEX z makiet projektowych na RGB/HSL dla stylów CSS w rozwoju frontendu lub na RGBA, gdy potrzebna jest przezroczystość
  • Ujednolicanie formatów wartości kolorów podczas przełączania się między narzędziami projektowymi, takimi jak Figma, Sketch i Photoshop dla projektantów UI/UX
  • Konwertowanie ekranowych wartości RGB na CMYK do odniesienia podczas wczesnej komunikacji dotyczącej produkcji drukarskiej
  • Sprawdzanie współczynników kontrastu między kolorami tekstu i tła dla zgodności z WCAG AA/AAA w dostępnym designie
  • Szybkie generowanie kompletnej rodziny od najjaśniejszego do najciemniejszego do budowania systemów projektowania za pomocą generatora odcieni
  • Generowanie profesjonalnych schematów kolorów (dopełniających, analogicznych itp.) dla brandingu lub projektowania plakatów za pomocą harmonii kolorów
  • Wyodrębnianie dominujących kolorów z obrazów referencyjnych lub zdjęć dla inspiracji (próbnik kolorów z obrazu)
  • Wsadowe przetwarzanie wielu wartości kolorów z makiet projektowych i konwertowanie na potrzebne formaty naraz
  • Wygodne dostosowywanie jasności i nasycenia za pomocą HSL lub OKLCH podczas pisania stanów CSS, takich jak hover
  • Budowanie percepcyjnie jednorodnych kolorów systemu projektowania przy użyciu nowoczesnej przestrzeni kolorów CSS OKLCH
  • Nauczanie zasad przestrzeni kolorów z interaktywnym wizualnym porównaniem, jak różne formaty reprezentują ten sam kolor
  • Szybkie znajdowanie angielskiej nazwy koloru CSS dla dowolnej wartości do łatwego odniesienia i komunikacji

Funkcje

  • Konwersja 14 formatów kolorów: obsługa HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ, LAB, LCH, OKLAB, OKLCH i nazwanych kolorów CSS
  • Inteligentne rozpoznawanie wejścia: wklej dowolny format koloru, a zostanie automatycznie wykryty; obsługuje skróty #rgb, #rrggbbaa z kanałem alfa, rgb(), hsl() i nazwy kolorów CSS
  • Dostosowywanie suwakami w czasie rzeczywistym: suwaki RGB czerwony/zielony/niebieski, HSL odcień/nasycenie/jasność, HSV do natychmiastowego dostrajania koloru WYSIWYG
  • Obsługa przezroczystości alfa: konwersja RGBA i HSLA z kanałem alfa, obsługa formatów krycia w procentach i ułamkach dziesiętnych
  • Dopasowywanie nazwanych kolorów CSS: automatycznie znajduje najbliższy standardowy nazwany kolor CSS (ponad 140 opcji) do szybkiego odniesienia
  • Sprawdzanie kontrastu WCAG: obliczanie współczynników kontrastu względem białego i czarnego tekstu w czasie rzeczywistym z automatycznymi wskaźnikami zaliczenia/niezaliczenia AA (≥4.5:1) i AAA (≥7:1)
  • Generator harmonii kolorów: generowanie jednym kliknięciem 5 klasycznych schematów — dopełniających, analogicznych, triadycznych, split-complementary i tetradycznych
  • Generowanie odcieni: dostępne zarówno tradycyjne odcienie mieszane w RGB, jak i percepcyjnie jednorodne odcienie OKLCH, natychmiastowe generowanie 11 kroków jasności
  • Konwersja wsadowa: przetwarzanie wielu wartości kolorów jednocześnie z wielowierszowym wejściem — idealne do przetwarzania palet systemów projektowania
  • Próbnik kolorów z obrazu: prześlij obraz, aby automatycznie próbkować i wyodrębnić 16 dominujących kolorów, świetne do pobierania palet z referencji lub zdjęć
  • Kopiowanie jednym kliknięciem: przycisk kopiowania obok każdego formatu koloru do natychmiastowego kopiowania w standardowej notacji — gotowe do wklejenia bezpośrednio do CSS lub oprogramowania projektowego
  • Generator losowych kolorów: generuj losowe kolory jednym kliknięciem dla szybkiej inspiracji
  • Przetwarzanie wyłącznie w przeglądarce: wszystkie obliczenia kolorów działają lokalnie w przeglądarce bez przesyłania na serwer — działa natychmiast bez rejestracji
  • Responsywny design: działa bezproblemowo na komputerach, urządzeniach mobilnych i tabletach — dostosowuj kolory i kopiuj wartości wygodnie na telefonach

Jak Używać

  1. Wpisz wartość dowolnego formatu koloru w górnym polu wejściowym, kliknij próbkę koloru, aby użyć próbnika, albo przeciągnij suwaki RGB/HSL/HSV, aby dostosować
  2. Narzędzie automatycznie konwertuje w czasie rzeczywistym na wszystkie 14 formatów, w tym HEX, RGB, RGBA, HSL, HSV, CMYK, OKLCH
  3. Przejdź do «Harmonia kolorów» dla schematów, «Odcienie» dla skal rozjaśnień/przyciemnień lub «Wsadowo/Próbnik» dla konwersji wsadowej lub ekstrakcji kolorów z obrazu
  4. Kliknij przycisk kopiowania obok dowolnego formatu koloru, aby skopiować standardową notację bezpośrednio do użycia

Często Zadawane Pytania

Jakie formaty kolorów obsługuje konwerter kolorów?

Obsługuje konwersję między 14 popularnymi formatami kolorów: HEX (3-cyfrowy skrót i 8-cyfrowy z alfą), RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK, XYZ (CIE 1931 z iluminantem D65), CIE LAB, LCH, OKLAB, OKLCH oraz ponad 140 standardowych nazwanych kolorów CSS. Wpisz dowolny format, aby automatycznie przekonwertować na wszystkie pozostałe.

Jak używać tego narzędzia do konwersji kolorów?

To bardzo proste: 1) Wpisz dowolną wartość koloru w górnym polu wejściowym — na przykład #22c55e, rgb(34,197,94), hsl(142,71%,45%) lub nawet nazwę koloru, np. green; 2) Lub kliknij próbkę koloru, aby użyć próbnika, albo przeciągnij suwaki RGB/HSL/HSV do dostosowywania w czasie rzeczywistym; 3) Konwersje wszystkich 14 formatów pojawiają się natychmiast poniżej — kliknij przycisk kopiowania obok dowolnego formatu, aby skopiować go do schowka.

Jaka jest różnica między HEX, RGB i HSL? Gdzie używa się każdego z nich?

HEX to najpopularniejsza notacja szesnastkowa dla internetu — #ff0000 dla czerwieni — szeroko stosowana w CSS i plikach przekazania projektu. RGB reprezentuje kolory wartościami 0–255 dla czerwonego, zielonego i niebieskiego, stanowi podstawę wyświetlaczy ekranowych. HSL używa Odcienia (0–360°), Nasycenia i Jasności, co lepiej odpowiada ludzkiemu postrzeganiu kolorów i jest bardziej intuicyjne dla projektantów przy dostosowywaniu kolorów. CMYK używa procentów tuszu cyjan, magenta, żółtego i czarnego dla druku. OKLCH to nowoczesna percepcyjnie jednorodna przestrzeń kolorów, która tworzy wizualnie gładkie gradienty i skale odcieni.

Co to jest współczynnik kontrastu WCAG? Jaki współczynnik spełnia standardy dostępności?

Współczynnik kontrastu WCAG mierzy różnicę luminancji między kolorem tekstu a kolorem tła, zapewniając czytelność treści dla użytkowników z wadami wzroku. Według Wytycznych dotyczących dostępności treści internetowych: zwykły tekst podstawowy wymaga ≥4.5:1 dla poziomu AA (zaliczony) i ≥7:1 dla poziomu AAA (doskonały); duży tekst (≥18pt pogrubiony lub ≥24pt zwykły) wymaga ≥3:1 dla AA. Narzędzie wyświetla współczynniki kontrastu względem białego i czarnego tekstu w czasie rzeczywistym z automatycznymi wskaźnikami zaliczenia/niezaliczenia dla standardów AA i AAA.

Co oznacza A w RGBA? Jak ustawić przezroczystość?

A w RGBA oznacza kanał Alfa, który kontroluje przezroczystość — wartości od 0 (całkowicie przezroczysty) do 1 (całkowicie nieprzezroczysty). Na przykład rgba(34,197,94,0.5) to półprzezroczysty zielony. Dostosuj przezroczystość suwakiem Alfa; wyniki konwersji pokazują zarówno formaty RGBA, jak i HSLA z alfą. HEX obsługuje również przezroczystość poprzez dodanie dwóch cyfr szesnastkowych po 6-cyfrowym kolorze — na przykład #22c55e80 reprezentuje 50% krycia.

Czym są OKLCH i LCH? Czym różnią się od HSL?

LCH i OKLCH to percepcyjnie jednorodne przestrzenie kolorów, gdzie L to Jasność, C to Chroma (nasycenie), H to Odcień. Ich największą zaletą w porównaniu do HSL jest: kolory o tej samej wartości L faktycznie wyglądają na jednakowo jasne wizualnie, co jest kluczowe dla systemów projektowania — jeśli generujesz palety o różnych odcieniach, ale tej samej jasności za pomocą HSL, niektóre wyglądają ciemniej niż inne, ale OKLCH gwarantuje jednorodną postrzeganą jasność. OKLCH jest nowszy niż LAB/LCH z prostszymi obliczeniami i dokładniejszym przewidywaniem kolorów, zalecany w nowoczesnym CSS (CSS Color Level 4).

Jak używać funkcji próbnika kolorów z obrazu?

Przejdź do zakładki «Wsadowo/Próbnik», kliknij prześlij, aby wybrać obraz — narzędzie automatycznie skaluje obrazy do siatki 100×100 i wyodrębnia 16 kolorów z równomiernie rozłożonych pozycji, pokazując próbki i wartości kolorów. Kliknij dowolną próbkę, aby ustawić ten kolor jako główny do dalszego dostosowywania i konwersji. Idealne do szybkiego wyodrębniania palet z obrazów referencyjnych, makiet projektowych lub zdjęć.

Jakie schematy harmonii kolorów są dostępne i jak ich używać?

Narzędzie zapewnia 5 klasycznych schematów harmonii: 1) Dopełniające: kolory oddalone o 180° dla wysokiego kontrastu; 2) Analogiczne: kolory oddalone o 30° dla naturalnej harmonii; 3) Triadyczne: kolory oddalone o 120° dla żywego balansu; 4) Split-complementary: kolor bazowy + ±30° od koloru dopełniającego dla kontrastu z miękkością; 5) Tetradyczne (prostokąt): cztery kolory oddalone o 90° dla bogatej różnorodności. Przejdź do zakładki «Harmonia kolorów», aby zobaczyć wygenerowane schematy — kliknij dowolną próbkę, aby ustawić ją jako kolor główny.

Czy wyniki konwersji CMYK można używać bezpośrednio do druku?

Dobrze sprawdzają się jako punkt odniesienia, ale uwaga: ekrany używają addytywnego koloru RGB (emisja światła), podczas gdy druk używa subtraktywnego CMYK (odbicie tuszu). Mają różne gamuty — niektóre jaskrawe kolory RGB (jak żywe zielenie i błękity) nie mogą być dokładnie odtworzone tuszami CMYK, więc występuje pewne przesunięcie kolorów. Narzędzie używa standardowych formuł konwersji RGB na CMYK, odpowiednich do wczesnej komunikacji i szybkiego odniesienia. Do ostatecznej produkcji drukarskiej zalecamy użycie profesjonalnego oprogramowania projektowego z właściwymi profilami kolorów ICC do proofingu cyfrowego.

Jak działa konwersja wsadowa? Ile kolorów mogę przekonwertować naraz?

Przejdź do zakładki «Wsadowo/Próbnik», wpisz jeden kolor na linię w polu tekstowym (swobodnie mieszając HEX/RGB/HSL/nazwy kolorów CSS), a następnie kliknij konwertuj wsadowo, aby przetworzyć wszystkie kolory naraz. Wyniki pokazują próbki kolorów i wartości HEX dla każdego. Nie ma teoretycznego limitu, ale dla setek kolorów zalecamy przetwarzanie partiami, aby uniknąć opóźnień przeglądarki.

Czy mogę używać konwertera kolorów na urządzeniach mobilnych?

Tak. Narzędzie używa responsywnego designu i działa bezbłędnie na urządzeniach mobilnych, tabletach i ekranach komputerów wszystkich rozmiarów. Na telefonie nadal możesz wpisywać wartości kolorów, przeciągać suwaki, aby dostosowywać kolory, przeglądać konwersje i kopiować wartości — wszystkie funkcje odpowiadają doświadczeniu na komputerze. A ponieważ są to czyste lokalne obliczenia, nie zużywa Twoich danych mobilnych.

Co zrobić, jeśli przy wejściu wyświetla się «nierozpoznany format koloru»?

Sprawdź format wejścia: 1) HEX musi zaczynać się od # (opcjonalnie), po którym następują 3, 6 lub 8 znaków szesnastkowych (0-9/a-f) — #f00, #ff0000, #ff0000ff są prawidłowe; 2) Format RGB musi mieć postać rgb(r,g,b) z trzema wartościami 0–255 oddzielonymi przecinkami; 3) Format HSL to hsl(h,s%,l%) z odcieniem 0–360°, nasyceniem i jasnością 0–100%; 4) Nazwy kolorów CSS muszą być standardowymi nazwami, np. red/blue/green — chińskie nazwy kolorów nie są obsługiwane.

Dlaczego przekonwertowane kolory wyglądają inaczej w różnym oprogramowaniu?

To normalne zachowanie zarządzania kolorami: różne oprogramowanie, monitory i systemy operacyjne mogą używać różnych profili kolorów (sRGB, Display P3, Adobe RGB), co powoduje niewielkie wizualne różnice dla tej samej wartości koloru. Strony internetowe domyślnie używają przestrzeni kolorów sRGB — jeśli używasz profili Adobe RGB lub Display P3 w oprogramowaniu takim jak Photoshop, musisz przekonwertować na sRGB podczas eksportu dla spójnego wyświetlania w internecie.

Jaki format koloru powinienem używać w rozwoju frontendu?

Nowoczesny CSS obsługuje wszystkie formaty kolorów: HEX jest najpopularniejszy z najlepszą kompatybilnością i jest standardem przekazania projektu; RGB/RGBA dobrze sprawdza się, gdy potrzebujesz dynamicznej regulacji krycia lub manipulacji na poziomie kanałów; HSL jest najbardziej intuicyjny do pisania wariantów kolorów bezpośrednio w kodzie (np. rozjaśnianie stanu hover przez proste zwiększenie L); OKLCH to przyszłość, natywnie obsługiwany w CSS Color Level 4, z percepcyjną jednorodnością idealną do generowania odcieni i gradientów — wybierz w zależności od potrzeb kompatybilności Twojego projektu.

Do czego służy funkcja generowania odcieni? Jaka jest różnica między tradycyjnymi odcieniami a odcieniami OKLCH?

Generowanie odcieni natychmiast tworzy 11 kroków (50–900) rozjaśnień i przyciemnień dla rodziny kolorów, idealne do budowania palet systemów projektowania (jak system kolorów Tailwind). Tradycyjne odcienie po prostu mieszają w kierunku bieli w przestrzeni RGB — chociaż liczbowo są jednorodne, średnie tony mogą wyglądać nierównomiernie. Odcienie OKLCH utrzymują odcień i chromę, dostosowując tylko jasność L, tworząc wizualnie gładkie przejścia między jasnym a ciemnym — bardziej profesjonalnie i dopracowane.

O przestrzeniach kolorów i konwersji formatów kolorów

Konwertery kolorów należą do najczęściej używanych narzędzi dla projektantów i frontend developerów, zapewniając dokładną konwersję między różnymi reprezentacjami kolorów. Sam kolor jest wrażeniem wzrokowym; aby go reprezentować na komputerach i w druku, ludzie opracowali wiele modeli kolorów (przestrzeni kolorów), które opisują ten sam kolor za pomocą różnych systemów liczbowych, każdy odpowiedni do różnych scenariuszy i urządzeń.

Popularne formaty kolorów obejmują: HEX (szesnastkowy RGB, standardowa notacja internetowa), RGB (wartości czerwonego/zielonego/niebieskiego 0–255, podstawa wyświetlaczy ekranowych), HSL (Odcień/Nasycenie/Jasność, najbardziej intuicyjny dla dostosowywania kolorów przez człowieka), CMYK (procenty cyjan/magenta/żółty/kluczowy czarny dla druku). W ostatnich latach percepcyjnie jednorodne przestrzenie kolorów, takie jak OKLCH, zyskują popularność, ponieważ matematycznie gwarantują, że kolory o tej samej wartości jasności faktycznie wyglądają na jednakowo jasne wizualnie — kluczowe dla budowania systemów projektowania i generowania gradientów.

Po co konwertować między formatami kolorów? Różne narzędzia, platformy i nośniki wyjściowe używają różnych formatów kolorów: CSS internetowy obsługuje HEX/RGB/HSL/OKLCH i inne; oprogramowanie projektowe, takie jak Figma/Sketch, domyślnie używa HEX; druk wymaga CMYK; a podczas dynamicznego dostosowywania kolorów w kodzie (np. stany hover lub zmiany krycia) HSL i OKLCH są znacznie wygodniejsze niż HEX. Dokładna konwersja kolorów zapewnia spójność kolorów między makietami projektowymi a ostateczną implementacją.

Kontrast WCAG to ważny standard dostępności internetowej, mierzący różnicę luminancji między tekstem pierwszego planu a kolorami tła w celu zapewnienia czytelności dla użytkowników z wadami wzroku. Zwykły tekst podstawowy wymaga współczynnika kontrastu 4.5:1 (poziom AA), dla ważnych treści zalecany jest 7:1 (poziom AAA). Nasze narzędzie oblicza to w czasie rzeczywistym, pomagając projektantom uwzględniać dostępność podczas wybierania kolorów, zamiast korygować to później.

Harmonia kolorów to klasyczna teoria kolorów oparta na kole barw, generująca wizualnie spójne kombinacje przy użyciu geometrycznych położeń odcieni wokół koła. Kolory dopełniające tworzą silny kontrast, idealny dla przycisków i akcentów; kolory analogiczne są harmonijne i naturalne dla dużych obszarów tła; schematy triadyczne i tetradyczne zapewniają balans i bogactwo dla tożsamości marki. Narzędzie zawiera 5 najczęściej używanych schematów harmonii, generujących palety jednym kliknięciem.

Odcienie/rozjaśnienia koloru to odmiany tego samego odcienia od jasnego do ciemnego, podstawa do budowania systemów projektowania (jak palety Tailwind CSS 50–900). Tradycyjne odcienie RGB po prostu mieszają w kierunku bieli, ale wyglądają wizualnie nierównomiernie; odcienie oparte na OKLCH utrzymują odcień i chromę, dostosowując tylko jasność, tworząc wizualnie gładkie przejścia od jasnego do ciemnego — zalecane podejście dla nowoczesnych systemów projektowania. Nasze narzędzie oferuje oba style odcieni do porównania.

Dlaczego przetwarzanie lokalne jest ważne? Konwersja kolorów jest czysto matematyczna i absolutnie nie wymaga przesyłania danych na serwery. Wszystkie obliczenia w naszym narzędziu działają w całości lokalnie w przeglądarce — otwórz stronę i używaj natychmiast bez rejestracji lub logowania, obrazy i dane kolorów nie są przesyłane. Jest szybkie i chroni prywatność — możesz go pewnie używać nawet dla nieopublikowanych, poufnych kolorów makiet projektowych.

Ważna uwaga: konwersja formatów kolorów jest matematycznie precyzyjna, ale ze względu na gamuty ekranów, kalibrację monitorów i procesy drukowania, ta sama wartość koloru może wyglądać nieco inaczej na różnych urządzeniach i nośnikach. Ekrany używają addytywnego RGB (więcej światła = jaśniej), podczas gdy druk używa subtraktywnego CMYK (więcej tuszu = ciemniej). Oba mają różne gamuty — niektóre wysoce nasycone kolory RGB nie mogą być dokładnie odtworzone tuszami CMYK. Wyniki konwersji idealnie nadają się do projektowania cyfrowego i rozwoju webowego; do ostatecznej produkcji drukarskiej zalecamy profesjonalne oprogramowanie do zarządzania kolorami do proofingu.

术语表

HEX
Szesnastkowa notacja koloru używająca #, po którym następuje 6 cyfr szesnastkowych reprezentujących RGB (dwie cyfry na kanał, 00–FF) — #FF0000 dla czerwieni, najpopularniejszy format dla internetu i oprogramowania projektowego. Obsługuje 3-cyfrowe skróty (np. #f00) i 8-cyfrową notację z kanałem alfa.
RGB/RGBA
Reprezentuje kolor trzema wartościami 0–255 dla czerwonego, zielonego i niebieskiego; rgba() dodaje kanał Alfa dla przezroczystości (0–1). Podstawowy model kolorów dla wyświetlaczy ekranowych.
HSL/HSLA
Reprezentuje kolor Odcieniem (0–360°), Nasyceniem (0–100%) i Jasnością (0–100%), lepiej odpowiada ludzkiemu postrzeganiu kolorów — bardziej intuicyjne dla projektantów dostosowujących kolory.
HSV/HSB
Odcień, Nasycenie, Wartość/Jasność — podobne do HSL, ale z innym obliczaniem jasności, powszechnie spotykane w próbnikach kolorów w oprogramowaniu projektowym, takim jak Photoshop.
HWB
Odcień, Biel, Czerń — dodatek CSS Color Level 4, bardziej intuicyjny niż HSL: po prostu dodaj biel lub czerń, aby dostosować ton.
CMYK
Procenty tuszy cyjan, magenta, żółtego i kluczowego (czarnego), używane w przemyśle poligraficznym do reprezentowania proporcji mieszania tuszy.
CIE LAB/LAB
Percepcyjnie jednorodna przestrzeń kolorów zdefiniowana przez Międzynarodową Komisję Oświetleniową (CIE): L dla Jasności (0–100), a dla osi zielony-czerwony, b dla osi niebieski-żółty — zaprojektowana tak, aby odległości liczbowe odpowiadały postrzeganym różnicom kolorów.
LCH
Reprezentacja we współrzędnych biegunowych przekonwertowana z LAB: L Jasność, C Chroma (nasycenie), H Odcień — bardziej percepcyjnie jednorodna niż HSL, odpowiednia dla profesjonalnego projektowania wymagającego precyzyjnej kontroli percepcyjnej.
OKLAB/OKLCH
Nowa generacja percepcyjnie jednorodnych przestrzeni kolorów wprowadzona w 2020 roku — prostsze obliczenia i dokładniejsze przewidywanie odcienia niż LAB/LCH. OKLCH to jego forma biegunowa, natywnie obsługiwana w nowoczesnym CSS i zalecana do budowania systemów projektowania.
Kontrast WCAG
Współczynnik luminancji między tekstem pierwszego planu a tłem określony przez Wytyczne dotyczące dostępności treści internetowych: AA wymaga ≥4.5:1 dla tekstu podstawowego, AAA wymaga ≥7:1 — zapewnia czytelność dla użytkowników z wadami wzroku.
Harmonia kolorów
Teoria kolorów oparta na położeniach wokół koła barw, wykorzystująca relacje geometryczne (dopełniające 180°, analogiczne z odstępem 30°, triadyczne z odstępem 120° itp.) do generowania wizualnie spójnych i estetycznie przyjemnych kombinacji.
Odcienie/rozjaśnienia
Zakres odmian tego samego odcienia od jasnego do ciemnego, zwykle generowany jako 11 kroków od 50 do 900, używany w systemach projektowania dla różnych zastosowań jednego koloru (tła, obramowania, tekst, akcenty).

Skrócona porównawcza tabela 14 formatów kolorów

Poniżej przedstawiono zakresy wartości, przykłady czystej czerwieni i główne przypadki użycia dla każdego formatu koloru:

FormatZakres wartościPrzykład czystej czerwieniGłówne przypadki użycia
HEX#RRGGBB 00-FF#ff0000CSS internetowy, przekazanie projektu — najbardziej uniwersalny format
RGBR/G/B: 0-255rgb(255,0,0)Podstawa wyświetlaczy ekranowych, programowanie Canvas/WebGL
RGBAPlus A: 0-1rgba(255,0,0,1)CSS wymagający przezroczystości, efekty nakładania
HSLH:0-360°, S/L:0-100%hsl(0,100%,50%)Projektowe dostosowywanie kolorów, dynamiczna manipulacja kolorami w kodzie
HSVH:0-360°, S/V:0-100%hsv(0,100%,100%)Próbniki kolorów w oprogramowaniu projektowym, takim jak Photoshop
HWBH:0-360°, W/B:0-100%hwb(0,0%,0%)CSS Color 4 — intuicyjne dostosowywanie przez dodawanie bieli/czerni
CMYKC/M/Y/K: 0-100%cmyk(0%,100%,100%,0%)Przemysł poligraficzny i wydawniczy
OKLCHL:0-1, C:0-0.4, H:0-360°oklch(0.63,0.24,29)Nowoczesny CSS, palety systemów projektowania, percepcyjnie jednorodne gradienty

Tabela referencyjna standardów kontrastu dostępności WCAG

Minimalne wymagania kontrastu z Wytycznych dotyczących dostępności treści internetowych (WCAG 2.1):

PoziomWymagany współczynnik kontrastuZastosowany typ tekstuUwagi
AA≥ 4.5:1Zwykły tekst podstawowy (<18pt zwykły lub <14pt pogrubiony)Minimalny standard zaliczający, wymóg zgodności prawnej
AA≥ 3:1Duży tekst (≥18pt zwykły lub ≥14pt pogrubiony)Duże nagłówki mogą mieć obniżone wymagania
AAA≥ 7:1Zwykły tekst podstawowy (rozszerzony)Zalecany dla ważnych treści, długiego czytania
AAA≥ 4.5:1Duży tekst (rozszerzony)Doskonały dostępny design

Skrócona tabela 5 schematów harmonii kolorów

Klasyczne kombinacje kolorów oparte na kątach koła barw — kliknij, aby wygenerować natychmiast:

Typ schematuOdstęp odcieniLiczba kolorówEfekt wizualny i przypadki użycia
DopełniająceOddalone o 180°2 kolorySilny kontrast — idealne dla przycisków, akcentów, CTA
Analogiczne±30° sąsiadujące3 koloryHarmonijne i naturalne — świetne dla dużych teł, głównych palet
TriadyczneZ odstępem 120°3 koloryŻywe i zbalansowane — idealne dla brandingu, ilustracji
Split-complementaryBazowy + ±30° od dopełniającego3 koloryKontrast z miękkością — bardziej wyrafinowane niż dopełniające
TetradyczneZ odstępem 90°4 koloryBogate i różnorodne — idealne dla złożonych designów, produktów dziecięcych

Privacy & Security

Ten konwerter kolorów wykonuje wszystkie obliczenia kolorów, próbkowanie kolorów z obrazów i przetwarzanie wsadowe w całości lokalnie w przeglądarce przy użyciu czystego JavaScript w pamięci przeglądarki. Wartości kolorów, które wpisujesz, i obrazy, które przesyłasz, nigdy nie są przesyłane przez sieć na żadne serwery, nie są rejestrowane, buforowane ani przechowywane. Po przetworzeniu zamknięcie lub odświeżenie strony automatycznie usuwa dane tymczasowe z pamięci przeglądarki. Poufne treści, takie jak kolory nieopublikowanych makiet projektowych i kolory marki, można bezpiecznie używać bez ryzyka wycieku.

Authoritative References

Troubleshooting

Co zrobić, jeśli przy wejściu wyświetla się «nierozpoznany format koloru»?

Sprawdź: 1) Format HEX używa prawidłowych znaków szesnastkowych (0-9, a-f, A-F) z 3, 6 lub 8 cyframi; # jest opcjonalne; 2) Format RGB/RGBA wymaga trzech lub czterech wartości w nawiasach — R/G/B 0-255, Alfa 0-1, oddzielonych przecinkami; 3) Format HSL/HSLA wymaga H 0-360, S i L jako wartości procentowych 0-100; 4) Nazwy kolorów CSS muszą być standardowymi angielskimi nazwami — chińskie nazwy kolorów nie są obsługiwane.

Dlaczego konwersja CMYK wygląda inaczej niż rzeczywisty druk?

To oczekiwane: RGB i CMYK mają różne gamuty — wiele jaskrawych kolorów RGB nie może być odtworzonych tuszami CMYK. Narzędzie używa standardowych formuł konwersji odpowiednich do wczesnego odniesienia. Do profesjonalnego druku: 1) Przekonwertuj do trybu CMYK w oprogramowaniu projektowym; 2) Użyj właściwych profili kolorów ICC; 3) Wykonaj proof cyfrowy.

Dlaczego ten sam kolor wygląda inaczej na telefonie i na komputerze?

Różne ekrany mają różne pokrycie gamutu, temperaturę barwową, jasność i kalibrację: Mac domyślnie używa szerokiego gamutu Display P3, większość komputerów z Windows używa sRGB, a ekrany mobilne są różne. W projektowaniu internetowym zaleca się standaryzację na sRGB jako punkt odniesienia dla spójnego wyglądu na większości urządzeń.

Przesyłanie obrazu do próbnika kolorów nie reaguje?

Proszę potwierdzić: 1) Przesyłasz standardowy format obrazu (JPG/PNG/GIF/WebP); 2) Plik obrazu nie jest uszkodzony; 3) Rozmiar pliku nie jest zbyt duży (zaleca się poniżej 5MB). Próbkowanie kolorów z obrazu jest przetwarzane lokalnie w canvas i nigdy nie jest przesyłane na serwery — odświeżenie i ponowne przesłanie zwykle rozwiązuje problemy.