HTML Color Codes

HTML Kleurkiezer voor RGB HEX HSL formaten

Verkrijg eenvoudig HTML CSS kleurcodes voor uw website met behulp van de kleurkiezer, converteer kleurformaat tussen HEX, RGB, HSL, HSV.

Kies een kleur

Voer kleurwaarde in

Of gebruik HTML5-kiezer

Geselecteerde kleur

Rood: 0
Groen: 255
Blauw: 255
HUE (Graden): 180
Helderheid: 0.7
Alpha: 1
Hex: #00ffff
RGB: rgb(0, 255, 255)
HSL: hsl(180, 100%, 50%)
Kleurgroep: Cyan
Delen:
CSS3 kleurvoorbeeld

<style>
  div {
    color: #00ffff;
    color: rgb(0, 255, 255);
    color: hsl(180, 100%, 50%);
  }
</style>
Donkerste en Lichtste stijlen

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

Kleuren ophalen uit een afbeelding

get pixel color from pic

Kies een kleur en maak een palet

select color and create palette

Wat is een HTML-kleurcode?

HTML-kleurcodes zijn een manier om kleuren in webdesign te specificeren. Deze codes worden gebruikt in HTML en CSS om de kleuren van elementen zoals tekst, achtergronden, randen en meer te definiëren. Het begrijpen van HTML-kleurcodes is essentieel voor het maken van visueel aantrekkelijke en consistente webpagina's.

Bijvoorbeeld, de kleur rood kan worden geïdentificeerd met behulp van de volgende formaten:

Soorten HTML-kleurcodes


Hexadecimale Kleurcodes:
  • De meest voorkomende manier om kleuren in HTML en CSS te specificeren is door gebruik te maken van hexadecimale (hex) kleurcodes. Een hex-kleurcode is een combinatie van zes cijfers en letters die wordt gedefinieerd door de mix van rode, groene en blauwe (RGB) componenten.
  • Formaat: #RRGGBB
  • Voorbeeld: #FF5733 vertegenwoordigt een tint oranje.
  • Elk cijferpaar komt overeen met de intensiteit van respectievelijk rood, groen en blauw op een schaal van 00 (geen intensiteit) tot FF (volle intensiteit).
RGB Kleurcodes:
  • RGB-kleurcodes definiëren kleuren op basis van hun rode, groene en blauwe componenten.
  • Formaat: rgb(rood, groen, blauw)
  • Voorbeeld: rgb(255, 87, 51) is het RGB-equivalent van #FF5733.
  • Elke component (rood, groen en blauw) wordt gespecificeerd als een getal tussen 0 en 255
RGBA Kleurcodes:
  • Vergelijkbaar met RGB, maar bevat een alfa-component voor dekkingsgraad.
  • Formaat: rgba(rood, groen, blauw, alfa)
  • Voorbeeld: rgba(255, 87, 51, 0.5) specificeert dezelfde kleur met 50% dekkingsgraad.
HSL Kleurcodes:
  • HSL staat voor Hue, Saturation en Lightness.
  • Formaat: hsl(hue, saturatie%, lichtheid%)
  • Voorbeeld: hsl(9, 100%, 60%) is een andere manier om de kleur #FF5733 te vertegenwoordigen
  • Hue is een graad op het kleurenwiel (van 0 tot 360), saturatie is een percentage (0% is grijswaarden, 100% is volle kleur), en lichtheid is ook een percentage (0% is zwart, 100% is wit).
HSLA Kleurcodes:
  • Vergelijkbaar met HSL, maar bevat een alfa-component voor dekkingsgraad.
  • Formaat: hsla(hue, saturatie%, lichtheid%, alfa)
  • Voorbeeld: hsla(9, 100%, 60%, 0.5) specificeert dezelfde kleur met 50% dekkingsgraad.
HTML Kleurcodes Gebruiken:

HTML-kleurcodes kunnen worden gebruikt in verschillende CSS-eigenschappen om web elementen te stijlen. Bijvoorbeeld:

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

In dit voorbeeld worden de tekst, achtergrond en rand gestyled met behulp van verschillende soorten HTML-kleurcodes, die allemaal dezelfde tint oranje vertegenwoordigen.

HTML-kleurcodes zijn een fundamenteel aspect van webdesign, waarmee ontwikkelaars kleuren nauwkeurig kunnen definiëren en manipuleren. Door hex, RGB, RGBA, HSL en HSLA kleurcodes te begrijpen, kunt u visueel samenhangende en aantrekkelijke webpagina's maken die de gebruikerservaring verbeteren.