Konwersje – Szczegóły – Harmonie – Obrazy – Podgląd – Symulacja Ślepoty Kolorów – CSS – Pomoc
Konwersje
Tutaj widzisz swój kolor przekonwertowany do 15 różnych formatów kolorów, takich jak RGB, CMYK, HSV, HSL, CIELab, Android, Decimal i YUV.
🤖 Konwersja wielu kolorów na raz lub 📢 uzyskać Konwersje i Harmonie poprzez REST API.
| Format | Kolor |
|---|---|
| Hex | 496C3C 📋 |
| RGB | 73, 108, 60 📋 |
| RGB Procent | 29%, 42%, 24% 📋 |
| CMY | 0.7137, 0.5765, 0.7647 📋 |
| CMYK | 0.32, 0.00, 0.44, 0.58 📋 |
| HSL | 104°, 29%, 33% 📋 |
| HSV | 104°, 44%, 42% 📋 |
| XYZ | 8.9258, 12.4678, 6.2111 📋 |
| Format | Kolor |
|---|---|
| RYB | 60, 108, 95 📋 |
| Decimal | 4811836 📋 |
| CIELab | 41.95, -22.52, 22.92 📋 |
| CIELCh | 42, 32.133, 134.485 📋 |
| Yxy | 12.4678, 0.3233, 0.4517 📋 |
| Android (android.graphics.Color) | 4283001916 (0xFF496C3C) 📋 |
| YUV | 92.0630, -15.8071, -16.7183 📋 |
- 📕 HOWCOLORS.WORK
- Rozkład
- Jasność & Nasycenie Gradienty
- Analogiczne
- Triada
- Komplementarny
- Split Complementary
- Kwadrat
- Rectangle
- Sweetspot
- Białe tło
- Sprawdzenie kontrastu kolorów
- Czarne tło
- Sprawdzenie kontrastu kolorów
- RGB 73, 108, 60 Tło
- Dichromacja
- Trichromacy
- Monochromacja
- Text
- Border
- Tło
- 📕 HOWCOLORS.WORK
- Konwersja
- Szczegóły
- Harmonie
- Obrazy SVG
- Przeglądy
- Color Blindness Simulation
- Przykłady CSS
- Wiadro kolorów
- Color Contrast Checker
📕 HOWCOLORS.WORK
Przewodnik po notacji kolorów CSS.
lub kup go na Leanpub!
Szczegóły
Kolor RGB 73, 108, 60 jest kolorem ciemnym, a wersja websafe to hex 336633. Dopełnieniem tego koloru będzie 95, 60, 108, a wersja w skali szarości to 92, 92, 92.
20% jaśniejsza wersja oryginalnego koloru to 123, 160, 108, a 26, 60, 16 to 20% ciemniejszy kolor. Jeśli nasycisz kolor o 10%, otrzymasz 65, 108, 49, a jeśli zdesaturujesz o 10%, to jest to 81, 108, 71.
Rozkład
- Czerwony (29%)
- Zielony (42%)
- Niebieski (24%)
- Red (24%)
- Yellow (42%)
- Blue (37%)
- Cyan (32%)
- Magenta (0%)
- Yellow (44%)
- Black (58%)
- Cyan (71%)
- Magenta (58%)
- Yellow (76%)
Jasność & Nasycenie Gradienty
Te gradienty pokazują, jak zmienia się kolor RGB 73, 108, 60 przez zmianę jasności o 10 procent. Pierwszy rysunek pokazuje przesunięcie o +10% dla każdego koloru, a drugi rysunek -10%.
Podobne do gradientów jasności, ale następujące gradienty nasycenia pokazują zmianę koloru RGB 73, 108, 60 przez zmianę nasycenia o 10% zamiast.
Harmonie
Analogiczne
Analogiczna harmonia kolorów składa się z trzech kolorów, które są obok siebie na kole kolorów.
- 103, 102, 46
- 73, 108, 60
- 33, 112, 84
Triada
Triadyczna harmonia kolorów grupuje trzy kolory, które są równomiernie oddalone od siebie i tworzą trójkąt na kole kolorów.
- 73, 108, 60
- 6, 106, 150
- 149, 77, 87
Komplementarny
Kolorystyka komplementarna to para kolorów, które znajdują się naprzeciwko siebie na kole barw.
- 73, 108, 60
- 95, 60, 108
Split Complementary
Split-complementary colors różni się od schematu kolorów komplementarnych. Schemat składa się z trzech kolorów, kolor oryginalny i dwóch sąsiadów koloru uzupełniającego.
- 141, 79, 114
- 73, 108, 60
- 79, 97, 150
Kwadrat
Schemat kwadratowy jest jak schemat kolorów prostokąta, ale cztery kolory są równomiernie rozmieszczone na kole kolorów.
- 73, 108, 60
- 0, 111, 135
- 118, 87, 137
- 143, 83, 63
Rectangle
Kolorystyka rectangle składa się z czterech kolorów, które tworzą prostokąt na kole kolorów.
- 73, 108, 60
- 0, 113, 102
- 118, 87, 137
- 148, 77, 96
Sweetspot
Sweet spot grupuje kolor oryginalny i pięć kolorów dopełniających.
- 73, 108, 60
- 127, 140, 122
- 108, 94, 60
- 63, 71, 60
- 199, 199, 199
- 71, 71, 71
Obrazy SVG
Wybór obrazów SVG wykorzystujących wersję heksadecymalną #496C3C bieżącego koloru.
Podglądy
Białe tło
Ten podgląd pokazuje, jak kolor RGB 73, 108, 60 wygląda na białym tle.
Sprawdzenie kontrastu kolorów
Jeśli chcesz sprawdzić z innymi kombinacjami kolorów, wypróbuj Color Contrast Checker.
Czarne tło
Ten podgląd pokazuje, jak kolor RGB 73, 108, 60 wygląda na czarnym tle.
Sprawdzenie kontrastu kolorów
Jeśli chcesz sprawdzić z innymi kombinacjami kolorów, wypróbuj Color Contrast Checker.
RGB 73, 108, 60 Tło
Ten podgląd pokazuje, jak wygląda czarny tekst na tle o kolorze RGB 73, 108, 60.
Ten podgląd pokazuje jak wygląda biały tekst na tle z kolorem RGB 73, 108, 60.
Symulacja ślepoty na kolory
Wada wzroku na kolory jest bardzo złożonym tematem i nie mógłbym opisać różnych przyczyn lepiej niż robi to Wikipedia, więc jeśli chcesz dowiedzieć się więcej, powinieneś sprawdzić ich artykuł o ślepocie na kolory.
Dichromacja
73, 108, 60
108, 99, 57
119, 94, 63
81, 102, 110
Trichromacy
73, 108, 60
95, 102, 58
102, 99, 62
78, 104, 92
Monochromacja
73, 108, 60
92, 92, 92
85, 98, 80
Przykłady CSS
Text
Właściwość CSS do zmiany koloru tekstu na RGB 73, 108, 60 nazywa się „color”. Właściwość color może być ustawiona na klasach, identyfikatorach lub bezpośrednio na elemencie HTML.
Ten przykład pokazuje jak wygląda tekst w kolorze rgb(73, 108, 60).
📋 Copy Code
Jeśli chcesz dodać cień tekstu w tym kolorze użyj właściwości text-shadow, możesz wygenerować cień tekstu bezpośrednio za pomocą naszego 🔧 CSS Text Shadow Generator.
Tutaj widzisz jak wygląda czarny tekst z 4 pikselowym cieniem w kolorze rgb(73, 108, 60).
📋 Copy Code
Border
Właściwość CSS do zmiany obramowania elementu na RGB 73, 108, 60 nazywa się „border”. Właściwość border może być ustawiona na klasach, identyfikatorach lub bezpośrednio na elemencie HTML.
Ten przykład pokazuje kolor jako border, może on być zastosowany poprzez właściwość CSS „border” lub „border-color”.
📋 Copy Code
Jeśli tylko kolor obramowania powinien być zmieniony użyj właściwości border-color.
📋 Copy Code
Jeśli chcesz dodać cień ramki w tym kolorze użyj:
Tutaj widzisz jak wygląda ramka z 4 pikselowym cieniem w kolorze rgb(73, 108, 60).
📋 Copy Code
Tło
Właściwość CSS do zmiany koloru tła elementu na RGB 73, 108, 60 nazywa się „background”. Właściwość background może być ustawiona na klasach, identyfikatorach lub bezpośrednio na elemencie HTML.
📋 Copy Code
Jeżeli tylko kolor tła powinien być zmieniony może być użyty:
📋 Copy Code
Ten przykład pokazuje kolor jako tło, jest on zastosowany poprzez właściwość CSS „background”.
Aby zoptymalizować i skompresować swój kod CSS, możesz użyć naszego internetowego kompresora i optymalizatora CSS opartego na csstidy. Jeśli chcesz stworzyć liniowy lub radialny gradient jako tło lub obramowanie, sprawdź nasz 🌈 Generator gradientów CSS.
📕 HOWCOLORS.WORK
Przewodnik po notacji kolorów CSS.
lub kup go na Leanpub!
Jak używać Konwertowanie kolorów
Konwersja
Aby przekonwertować, wklej ciąg znaków w jednym z tych formatów kolorów, na przykład „496C3C”, do pola wprowadzania i kliknij Konwertuj. Wynik znajdzie się w sekcji Konwersje, a kolejne sekcje dostarczą Ci dalszych szczegółów na temat koloru.
Niektóre formaty kolorów używają tej samej notacji, a konwersja odgadnie skład zapytania. Jako przykład, jeśli spróbujesz przekonwertować ciąg „104°, 44%, 42%” może to być kolor HSV lub HSL, konwersja przyjmie HSL w tym przypadku.
Jako, że może to prowadzić do błędnych konwersji, możesz określić, który format przekazujesz przez zawijanie ciągu koloru w nawiasy z formatem z przodu. Szukany ciąg „HSV(104°, 44%, 42%)” da ci poprawny kolor HSV, ponieważ nie ma potrzeby zgadywać formatu. Innymi przykładami mogą być „CIELAB(41.95, -22.52, 22.92)”, „CIELCH(42, 32.133, 134.485)”, „YXY(12.4678, 0.3233, 0.4517)” i „CMYK(0.32, 0.00, 0.44, 0.58)”.
Szczegóły
W sekcji szczegółów najpierw otrzymujesz podsumowanie koloru i, jeśli jest dostępny, opis, taki jak „ciemna stonowana czerwień”. Możesz zobaczyć rozkład kolorów w różnych formatach. Na przykład, w formacie RGB, można poznać ilość czerwonego, zielonego i niebieskiego w swoim kolorze.
Na koniec, można uzyskać jasność i nasycenie gradientów swojego koloru w 10% krokach. Więc jeśli potrzebujesz jaśniejszej lub ciemniejszej wersji, możesz ją stąd wybrać.
Harmonie
Harmonie w zasadzie pokazują kolory, które dobrze współgrają z kolorem, który aktualnie oglądasz. Jeśli podoba Ci się jedna z harmonii, możesz bezpośrednio stworzyć 🌈 Gradient CSS lub 🔧 Cień tekstu CSS na jej podstawie lub wyświetlić harmonię jako 🖌️ Wiadro kolorów.
Obrazy SVG
Ta krótka sekcja pokazuje wybór plików SVG używających bieżącego koloru. Możesz pobrać te pliki i użyć ich w swoich projektach, na przykład jako obraz tła.
Przeglądy
Chcesz zobaczyć, jak twój kolor wygląda na białym lub czarnym tle? W takim razie powinieneś sprawdzić sekcję „Podgląd” na stronie kolorów.
Widzisz również kontrast koloru na tych tłach i dostajesz link do Color Contrast Checker z wybranym kolorem.
Color Blindness Simulation
Gdy wybierzesz kolor dla swojego projektu, możesz chcieć mieć na uwadze jak ten kolor jest postrzegany przez osoby z wadą wzroku. Dlatego dodałem tę sekcję pokazującą podgląd twojego koloru dla różnych wad wzroku.
Przykłady CSS
Jeśli jesteś nowy w tworzeniu stron internetowych, możesz chcieć zobaczyć jak zastosować twój kolor jako kolor pierwszego planu, tła lub obramowania. Sekcja „Przykłady CSS” daje ci dokładnie to, pomoc jak użyć bieżącego koloru w CSS.
Jeśli oglądasz kolor w formacie niedostępnym w CSS, zobaczysz kolor przekonwertowany do kompatybilnego formatu.
Wiadro kolorów
Zdecydowałeś o kolorach dla twojego następnego projektu i chcesz je pobrać jako paletę lub podzielić się nimi z przyjaciółmi, aby przedyskutować swoją decyzję? W takim razie powinieneś przyjrzeć się wiaderku kolorów. Pozwala ono na przechowywanie do 10 kolorów, automatycznie tworzy palety kolorów dla każdego z tych kolorów w oparciu o jasność i daje Ci matrycę WCAG.
Możesz pobrać każdą z palet kolorów lub wybrane kolory jako paletę GIMP, Adobe® ASE, lub Tailwind CSS. Dodatkowo, możesz zobaczyć wszystko jako 🌈 CSS Gradient, 🔧 CSS Cień Tekstu, lub 📷 Obraz Palety Kolorów.
Aby dodać kolor do swojego wiadra kolorów, umieściłem link „❤️ Dodaj ten kolor do wiadra” w sekcji nagłówka każdej strony na tej stronie.
Color Contrast Checker
Kiedy decydujesz się na kolory do projektu, istotne jest, aby pamiętać o kontraście kolorów. My Color Contrast Checker pozwala na sprawdzenie wybranych kolorów zgodnie z Web Content Accessibility Guidelines (WCAG) 2.0.
.