Tools App przez

Wybór kolorów dla Internetu: HEX, RGB, CSS

Wybierz kolor i odczytaj go jako zmienne HEX, RGB, HSL i CSS gotowe do wklejenia do systemu projektowego.

Jak to działa

Wejście koloru natywnego podaje wartość sRGB w postaci sześciocyfrowego ciągu szesnastkowego. Kanały są analizowane do postaci dziesiętnej dla trójki RGB, a niestandardowa właściwość CSS jest zapisana dokładnie w takiej składni, jakiej oczekuje arkusz stylów.

  • Wykorzystuje natywne wprowadzanie kolorów, dzięki czemu współpracuje z systemowym kroplomierzem, jeśli obsługuje go przeglądarka.

Dlaczego to ma znaczenie

Paleta żyje w Figmie, CSS, e-mailach, a czasem na płótnie. Każdy etap tłumaczenia to szansa na wklejenie niewłaściwego formatu, więc jednoczesne kopiowanie HEX, RGB i niestandardowej właściwości eliminuje szereg błędów, których można uniknąć.

Sprawdzony przykład

Wybranie #635BFF daje rgb(99, 91, 255) i niestandardową właściwość CSS --color: #635BFF, którą można upuścić w arkuszu stylów i wszędzie się do niej odwoływać, zamiast powtarzać kod szesnastkowy.

Typowe błędy

  • Wybór koloru i tła oddzielnie, bez sprawdzania kontrastu.
  • Poleganie na samym odcieniu w celu sygnalizowania stanu.
  • Zapominając o wariantach najechania i skupienia.

Praktyczne wskazówki

Wybierz najpierw skalę neutralną, a następnie akcent. Pojedynczy kolor akcentujący plus trzy neutralne odcienie łatwiej jest zachować spójność w jasnych i ciemnych motywach niż w przypadku większej palety.

Jak z niego korzystać

  1. Otwórz narzędzie. Wszystko działa w zakładce przeglądarki.
  2. Wklej lub wpisz wprowadzone dane, a następnie wybierz żądaną czynność.
  3. Sprawdź wynik i skopiuj go jednym kliknięciem.

Otwórz narzędzie

Często zadawane pytania

Czy mogę wybrać kolor z ekranu?

Jeśli przeglądarka obsługuje natywny zakraplacz, tak. W przeciwnym razie użyj próbki wejściowej koloru.

W jakich formatach wyświetla?

HEX, trójkę RGB i niestandardową właściwość CSS, które możesz wkleić do arkusza stylów.

Czy wybrany kolor zostaje zapisany?

Nie. Wartość istnieje tylko na stronie, dopóki jej nie zamkniesz.

Czy to narzędzie jest naprawdę darmowe?

Tak. Nie ma konta, nie ma paywalla i nie ma limitu użytkowania. Aplikacja Tools została ufundowana przez stojące za nią studio aumenso.

Czy wszystko, co wprowadzę, zostanie przesłane?

Nie. Narzędzie działa w zakładce przeglądarki; to, co wpiszesz, nigdy nie jest do nas wysyłane ani przechowywane.

← Wszystkie posty