HTML Color Codes

HTML Färgväljare för RGB HEX HSL-format

Få enkelt HTML CSS färgkoder för din webbplats med hjälp av färgväljaren, konvertera färgformat mellan HEX, RGB, HSL, HSV.

Välj en färg

Ange färgvärde

Eller använd HTML5-väljare

Vald färg

Röd: 0
Grön: 255
Blå: 255
HUE (Grader): 180
Ljusstyrka: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Färggupp: Cyan
Dela:
CSS3 färgexempel

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Mörkaste och ljusare stilar

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

Hämta färger från en bild

get pixel color from pic

Välj färg och skapa palett

select color and create palette

Vad är en HTML-färgkod?

HTML-färgkoder är ett sätt att specificera färger i webbdesign. Dessa koder används i HTML och CSS för att definiera färgerna på element som text, bakgrunder, ramar och mer. Att förstå HTML-färgkoder är viktigt för att skapa visuellt tilltalande och konsekventa webbsidor.

Till exempel kan färgen röd identifieras med hjälp av följande format:

Typer av HTML-färgkoder


Hexadecimala färgkoder:
  • Det vanligaste sättet att specificera färger i HTML och CSS är att använda hexadecimala (hex) färgkoder. En hex-färgkod är en sexsiffrig kombination av siffror och bokstäver definierad av dess blandning av röd, grön och blå (RGB) komponenter.
  • Format: #RRGGBB
  • Exempel: #FF5733 representerar en nyans av orange.
  • Varje par siffror motsvarar intensiteten av röd, grön och blå, respektive, på en skala från 00 (ingen intensitet) till FF (full intensitet).
RGB Färgkoder:
  • RGB-färgkoder definierar färger baserat på deras röda, gröna och blå komponenter.
  • Format: rgb(röd, grön, blå)
  • Exempel: rgb(255, 87, 51) är RGB-motsvarigheten till #FF5733.
  • Varje komponent (röd, grön och blå) specificeras som ett nummer mellan 0 och 255
RGBA Färgkoder:
  • Liknar RGB, men inkluderar en alfakomponent för opacitet.
  • Format: rgba(röd, grön, blå, alpha)
  • Exempel: rgba(255, 87, 51, 0.5) specificerar samma färg med 50% opacitet.
HSL Färgkoder:
  • HSL står för Hue (färgton), Saturation (mättnad) och Lightness (ljushet).
  • Format: hsl(färgton, mättnad%, ljushet%)
  • Exempel: hsl(9, 100%, 60%) är ett annat sätt att representera färgen #FF5733
  • Färgton är en grad på färghjulet (från 0 till 360), mättnad är en procent (0% är gråskala, 100% är full färg), och ljushet är också en procent (0% är svart, 100% är vit).
HSLA Färgkoder:
  • Liknar HSL, men inkluderar en alfakomponent för opacitet.
  • Format: hsla(färgton, mättnad%, ljushet%, alpha)
  • Exempel: hsla(9, 100%, 60%, 0.5) specificerar samma färg med 50% opacitet.
Använda HTML-färgkoder:

HTML-färgkoder kan användas i olika CSS-egenskaper för att stila webbelement. Till exempel:

<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>

I detta exempel är texten, bakgrunden och ramen stylade med hjälp av olika typer av HTML-färgkoder, alla representerar samma nyans av orange.

HTML-färgkoder är en grundläggande aspekt av webbdesign och gör det möjligt för utvecklare att definiera och manipulera färger med precision. Genom att förstå hex, RGB, RGBA, HSL och HSLA färgkoder kan du skapa visuellt sammanhängande och tilltalande webbsidor som förbättrar användarupplevelsen.