HTML Color Codes

HTML Color Picker dla formatów RGB HEX HSL

Łatwo uzyskaj kody kolorów HTML CSS dla swojej strony internetowej, używając selektora kolorów, konwertuj format koloru między HEX, RGB, HSL, HSV.

Wybierz kolor

Wprowadź wartość koloru

Lub użyj selektora HTML5

Wybrany kolor

Czerwony: 0
Zielony: 255
Niebieski: 255
HUE (Stopnie): 180
Jasność: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Grupa kolorów: Cyan
Udostępnij:
Przykład koloru CSS3

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Style najciemniejsze i najjaśniejsze

<style>
  .darken {
    color: rgb(0, 230, 230);
  }
  .lighten {
    color: rgb(25, 255, 255);
  }
</style>

Uzyskaj kolory z obrazu

get pixel color from pic

Wybierz kolor i stwórz paletę

select color and create palette

Czym jest kod koloru HTML?

Kody kolorów HTML to sposób na określenie kolorów w projektowaniu stron internetowych. Te kody są używane w HTML i CSS do definiowania kolorów takich elementów jak tekst, tła, obramowania i inne. Zrozumienie kodów kolorów HTML jest kluczowe dla tworzenia atrakcyjnych wizualnie i spójnych stron internetowych.

Na przykład, kolor czerwony można zidentyfikować za pomocą następujących formatów:

Rodzaje kodów kolorów HTML


Kody kolorów szesnastkowych:
  • Najczęstszym sposobem określania kolorów w HTML i CSS jest użycie szesnastkowych (hex) kodów kolorów. Kod koloru hex to sześciocyfrowa kombinacja liczb i liter zdefiniowana przez mieszankę komponentów czerwonego, zielonego i niebieskiego (RGB).
  • Format: #RRGGBB
  • Przykład: #FF5733 reprezentuje odcień pomarańczowego.
  • Każda para cyfr odpowiada intensywności koloru czerwonego, zielonego i niebieskiego, odpowiednio na skali od 00 (brak intensywności) do FF (pełna intensywność).
Kody kolorów RGB:
  • Kody kolorów RGB definiują kolory na podstawie ich komponentów czerwonego, zielonego i niebieskiego.
  • Format: rgb(czerwony, zielony, niebieski)
  • Przykład: rgb(255, 87, 51) to odpowiednik RGB dla #FF5733.
  • Każdy komponent (czerwony, zielony i niebieski) jest określany jako liczba między 0 a 255
Kody kolorów RGBA:
  • Podobne do RGB, ale zawiera komponent alpha dla przezroczystości.
  • Format: rgba(czerwony, zielony, niebieski, alpha)
  • Przykład: rgba(255, 87, 51, 0.5) określa ten sam kolor z 50% przezroczystością.
Kody kolorów HSL:
  • HSL oznacza odcień (Hue), nasycenie (Saturation) i jasność (Lightness).
  • Format: hsl(odcień, nasycenie%, jasność%)
  • Przykład: hsl(9, 100%, 60%) to inny sposób na przedstawienie koloru #FF5733
  • Odcień to stopień na kole barw (od 0 do 360), nasycenie to procent (0% to skala szarości, 100% to pełny kolor), a jasność to również procent (0% to czarny, 100% to biały).
Kody kolorów HSLA:
  • Podobne do HSL, ale zawiera komponent alpha dla przezroczystości.
  • Format: hsla(odcień, nasycenie%, jasność%, alpha)
  • Przykład: hsla(9, 100%, 60%, 0.5) określa ten sam kolor z 50% przezroczystością.
Użycie kodów kolorów HTML:

Kody kolorów HTML można używać w różnych właściwościach CSS do stylizowania elementów na stronie. Na przykład:

<style>
    .text-color {
        color: #FF5733;
    }
    .background-color {
        background-color: rgb(255, 87, 51);
    }
    .border-color {
        border: 2px solid hsl(9, 100%, 60%);
    }
</style>
<p class="text-color">This text is orange.</p>
<div class="background-color">This background is orange.</div>
<div class="border-color">This border is orange.</div>

W tym przykładzie tekst, tło i obramowanie są stylizowane za pomocą różnych rodzajów kodów kolorów HTML, wszystkie reprezentujące ten sam odcień pomarańczowego.

Kody kolorów HTML są podstawowym aspektem projektowania stron internetowych, pozwalającym programistom na precyzyjne definiowanie i manipulowanie kolorami. Dzięki zrozumieniu kodów kolorów hex, RGB, RGBA, HSL i HSLA możesz tworzyć spójne i atrakcyjne wizualnie strony internetowe, które poprawiają wrażenia użytkowników.