Deze pagina is vertaald door de Cloud Translation API.

Inspecteer en debug HD- en niet-HD-kleuren met de Kleurkiezer

Jecelyn Yeen

Sofia Emelianova

De kleurenkiezer biedt een grafische gebruikersinterface voor het wijzigen color en *-color -kleurdeclaraties en stelt u in staat om niet-HD- en HD-kleuren met één klik te creëren, converteren en debuggen.

Voor een gedetailleerde uitleg over de nieuwe kleurruimtes, zie de High Definition CSS Color Guide .

Open de kleurenkiezer en verander de kleuren.

Gebruik de kleurenkiezer om met één klik de kleurwaarden te wijzigen:

1. Selecteer een element in het paneel Elementen .

2. Zoek in het deelvenster Stijlen de color of *-color die u wilt wijzigen.

   Links van elke color of *-color staat een klein vierkant pictogram met een voorbeeld van die kleur.

   

Om de berekende waarde te bekijken, gebruikt u het deelvenster 'Berekend ' .

1. Klik op het voorbeeldvierkantje naast een kleur om de kleurenkiezer te openen.
2. Om de kleur te wijzigen, kunt u een van de UI-elementen van de kleurenkiezer gebruiken.

Elementen van de kleurenkiezer

Hieronder volgt een beschrijving van elk van de UI-elementen van de kleurenkiezer :

1. Schaduwen .
2. Pipet . Zie 'Proef een kleur naar keuze met de pipet' .
3. Kopiëren naar klembord . Kopieer de weergegeven waarde naar uw klembord.
4. Weergavewaarde . Argumenten van de gekozen kleurruimte.
5. Contrastverhouding . Alleen beschikbaar voor color . Het is het verschil tussen color en background-color .
6. Kleurenpalet . Klik op een vierkantje om de kleur ervan aan te passen aan die van het vierkantje.
7. Gamutgrens . Deze lijn is alleen beschikbaar voor de nieuwe kleurruimten en de functie color() . Deze kunnen zowel HD- als niet-HD-kleuren produceren. Met deze lijn kunt u onderscheid maken tussen HD en niet-HD.
8. Kleurcirkel . Sleep deze cirkel over de tinten om de weergavewaarde te wijzigen.
9. Kleurschuifregelaar .
10. Schuifregelaar voor transparantie .
11. Weergavewaardeschakelaar . Kies een kleurruimte uit de vervolgkeuzelijst. Zie Kleuren converteren .
12. Vouw de contrastverhouding uit . Hiermee opent u het bijbehorende gedeelte waarin u het contrast kunt aanpassen .

13. Kleurenpaletwisselaar . Klik erop om te wisselen tussen:

    • Kleurenpalet voor Material Design .
    • Aangepast kleurenpalet. Om de huidige kleur handmatig aan dit palet toe te voegen, klikt u hier. .
    • Palet met CSS-variabelen . Toont alle aangepaste CSS-variabelen (aangeduid met -- ) op uw pagina.
    • Paginakleurenpalet . Om dit palet te genereren, zoekt DevTools naar alle kleuren in uw stylesheets.

Kies een kleurruimte

Om een ​​kleurruimte te kiezen:

1. Houd de Shift-toets ingedrukt en klik op het voorbeeldpictogram naast een kleurwaarde. Er wordt een vervolgkeuzelijst geopend.

   

2. Kies een van de volgende kleurruimtes:

   • #<hex-color>
   • rgb(XXX / .X) .
   • hsl(XXX / X) .
   • hwb(XXX / .X) .

   Of een van de nieuwe ruimtes:

   • lch(XXX / .X)
   • oklch(XXX / .X)
   • lab(XXX / .X)
   • oklab(XXX / .X)

   Of een ruimte gedefinieerd door de functie color(<color_space> XXX) .

Kleuren omzetten

Wanneer u met de weergavewaardeschakelaar wisselt tussen kleurruimten, converteert DevTools de waarden automatisch.

Beweeg de muis over het pictogram om de oorspronkelijke waarde te zien.

De volgende video laat conversies in actie zien.

Contrast corrigeren

Om een ​​contrastprobleem bij een color op te lossen:

1. Open de kleurenkiezer naast de color .
2. Verhoog de contrastverhouding sectie.

3. Gebruik de voorgestelde kleur die aan de richtlijnen voldoet:

   • Klik naast de richtlijn.
   • Sleep in het voorbeeldvenster 'Schaduwen' bovenaan de cirkel met de kleur onder de bijbehorende lijn.

Standaard stelt de kleurenkiezer waarden voor die voldoen aan de APCA-normen .

U kunt er ook voor kiezen om waarden voor te stellen die voldoen aan de WebAIM-richtlijnen . Instellingen > Voorkeuren > Elementen , wis de Geavanceerd perceptueel contrastalgoritme (APCA)... selectievakje.

Om in één oogopslag een lijst te krijgen van alle contrastproblemen, volg je de handleiding 'Maak je website beter leesbaar' .

Test een kleur op een willekeurige plek met het pipetje.

De Met de pipetfunctie kunt u kleuren selecteren, zowel van de pagina als van elke willekeurige plek op het scherm.

Om een ​​kleur te selecteren vanaf een willekeurige plek op het scherm:

1. Open de kleurenkiezer en doe een van de volgende dingen:
   • Klik op knop.
   • Druk op C om de pipet te activeren. Om deze te deactiveren, drukt u op Escape .
2. Activeer het pipetgereedschap , beweeg de muis over de gewenste kleur en klik om een ​​kleurmonster te nemen.

In dit voorbeeld toont de kleurenkiezer een huidige kleurwaarde van rgb(224 255 255 / 15%) . Deze kleur verandert in roze zodra je buiten Chrome klikt.

Jecelyn Yeen

Sofia Emelianova

De kleurenkiezer biedt een grafische gebruikersinterface voor het wijzigen color en *-color -kleurdeclaraties en stelt u in staat om niet-HD- en HD-kleuren met één klik te creëren, converteren en debuggen.

Voor een gedetailleerde uitleg over de nieuwe kleurruimtes, zie de High Definition CSS Color Guide .

Open de kleurenkiezer en verander de kleuren.

Gebruik de kleurenkiezer om met één klik de kleurwaarden te wijzigen:

1. Selecteer een element in het paneel Elementen .

2. Zoek in het deelvenster Stijlen de color of *-color die u wilt wijzigen.

   Links van elke color of *-color staat een klein vierkant pictogram met een voorbeeld van die kleur.

   

Om de berekende waarde te bekijken, gebruikt u het deelvenster 'Berekend ' .

1. Klik op het voorbeeldvierkantje naast een kleur om de kleurenkiezer te openen.
2. Om de kleur te wijzigen, kunt u een van de UI-elementen van de kleurenkiezer gebruiken.

Elementen van de kleurenkiezer

Hieronder volgt een beschrijving van elk van de UI-elementen van de kleurenkiezer :

1. Schaduwen .
2. Pipet . Zie 'Proef een kleur naar keuze met de pipet' .
3. Kopiëren naar klembord . Kopieer de weergegeven waarde naar uw klembord.
4. Weergavewaarde . Argumenten van de gekozen kleurruimte.
5. Contrastverhouding . Alleen beschikbaar voor color . Het is het verschil tussen color en background-color .
6. Kleurenpalet . Klik op een vierkantje om de kleur ervan aan te passen aan die van het vierkantje.
7. Gamutgrens . Deze lijn is alleen beschikbaar voor de nieuwe kleurruimten en de functie color() . Deze kunnen zowel HD- als niet-HD-kleuren produceren. Met deze lijn kunt u onderscheid maken tussen HD en niet-HD.
8. Kleurcirkel . Sleep deze cirkel over de tinten om de weergavewaarde te wijzigen.
9. Kleurschuifregelaar .
10. Schuifregelaar voor transparantie .
11. Weergavewaardeschakelaar . Kies een kleurruimte uit de vervolgkeuzelijst. Zie Kleuren converteren .
12. Vouw de contrastverhouding uit . Hiermee opent u het bijbehorende gedeelte waarin u het contrast kunt aanpassen .

13. Kleurenpaletwisselaar . Klik erop om te wisselen tussen:

    • Kleurenpalet voor Material Design .
    • Aangepast kleurenpalet. Om de huidige kleur handmatig aan dit palet toe te voegen, klikt u hier. .
    • Palet met CSS-variabelen . Toont alle aangepaste CSS-variabelen (aangeduid met -- ) op uw pagina.
    • Paginakleurenpalet . Om dit palet te genereren, zoekt DevTools naar alle kleuren in uw stylesheets.

Kies een kleurruimte

Om een ​​kleurruimte te kiezen:

1. Houd de Shift-toets ingedrukt en klik op het voorbeeldpictogram naast een kleurwaarde. Er wordt een vervolgkeuzelijst geopend.

   

2. Kies een van de volgende kleurruimtes:

   • #<hex-color>
   • rgb(XXX / .X) .
   • hsl(XXX / X) .
   • hwb(XXX / .X) .

   Of een van de nieuwe ruimtes:

   • lch(XXX / .X)
   • oklch(XXX / .X)
   • lab(XXX / .X)
   • oklab(XXX / .X)

   Of een ruimte gedefinieerd door de functie color(<color_space> XXX) .

Kleuren omzetten

Wanneer u met de weergavewaardeschakelaar wisselt tussen kleurruimten, converteert DevTools de waarden automatisch.

Beweeg de muis over het pictogram om de oorspronkelijke waarde te zien.

De volgende video laat conversies in actie zien.

Contrast corrigeren

Om een ​​contrastprobleem bij een color op te lossen:

1. Open de kleurenkiezer naast de color .
2. Verhoog de contrastverhouding sectie.

3. Gebruik de voorgestelde kleur die aan de richtlijnen voldoet:

   • Klik naast de richtlijn.
   • Sleep in het voorbeeldvenster 'Schaduwen' bovenaan de cirkel met de kleur onder de bijbehorende lijn.

Standaard stelt de kleurenkiezer waarden voor die voldoen aan de APCA-normen .

U kunt er ook voor kiezen om waarden voor te stellen die voldoen aan de WebAIM-richtlijnen . Instellingen > Voorkeuren > Elementen , wis de Geavanceerd perceptueel contrastalgoritme (APCA)... selectievakje.

Om in één oogopslag een lijst te krijgen van alle contrastproblemen, volg je de handleiding 'Maak je website beter leesbaar' .

Test een kleur op een willekeurige plek met het pipetje.

De Met de pipetfunctie kunt u kleuren selecteren, zowel van de pagina als van elke willekeurige plek op het scherm.

Om een ​​kleur te selecteren vanaf een willekeurige plek op het scherm:

1. Open de kleurenkiezer en doe een van de volgende dingen:
   • Klik op knop.
   • Druk op C om de pipet te activeren. Om deze te deactiveren, drukt u op Escape .
2. Activeer het pipetgereedschap , beweeg de muis over de gewenste kleur en klik om een ​​kleurmonster te nemen.

In dit voorbeeld toont de kleurenkiezer een huidige kleurwaarde van rgb(224 255 255 / 15%) . Deze kleur verandert in roze zodra je buiten Chrome klikt.

Jecelyn Yeen

Sofia Emelianova

De kleurenkiezer biedt een grafische gebruikersinterface voor het wijzigen color en *-color -kleurdeclaraties en stelt u in staat om niet-HD- en HD-kleuren met één klik te creëren, converteren en debuggen.

Voor een gedetailleerde uitleg over de nieuwe kleurruimtes, zie de High Definition CSS Color Guide .

Open de kleurenkiezer en verander de kleuren.

Gebruik de kleurenkiezer om met één klik de kleurwaarden te wijzigen:

1. Selecteer een element in het paneel Elementen .

2. Zoek in het deelvenster Stijlen de color of *-color die u wilt wijzigen.

   Links van elke color of *-color staat een klein vierkant pictogram met een voorbeeld van die kleur.

   

Om de berekende waarde te bekijken, gebruikt u het deelvenster 'Berekend ' .

1. Klik op het voorbeeldvierkantje naast een kleur om de kleurenkiezer te openen.
2. Om de kleur te wijzigen, kunt u een van de UI-elementen van de kleurenkiezer gebruiken.

Elementen van de kleurenkiezer

Hieronder volgt een beschrijving van elk van de UI-elementen van de kleurenkiezer :

1. Schaduwen .
2. Pipet . Zie 'Proef een kleur naar keuze met de pipet' .
3. Kopiëren naar klembord . Kopieer de weergegeven waarde naar uw klembord.
4. Weergavewaarde . Argumenten van de gekozen kleurruimte.
5. Contrastverhouding . Alleen beschikbaar voor color . Het is het verschil tussen color en background-color .
6. Kleurenpalet . Klik op een vierkantje om de kleur ervan aan te passen aan die van het vierkantje.
7. Gamutgrens . Deze lijn is alleen beschikbaar voor de nieuwe kleurruimten en de functie color() . Deze kunnen zowel HD- als niet-HD-kleuren produceren. Met deze lijn kunt u onderscheid maken tussen HD en niet-HD.
8. Kleurcirkel . Sleep deze cirkel over de tinten om de weergavewaarde te wijzigen.
9. Kleurschuifregelaar .
10. Schuifregelaar voor transparantie .
11. Weergavewaardeschakelaar . Kies een kleurruimte uit de vervolgkeuzelijst. Zie Kleuren converteren .
12. Vouw de contrastverhouding uit . Hiermee opent u het bijbehorende gedeelte waarin u het contrast kunt aanpassen .

13. Kleurenpaletwisselaar . Klik erop om te wisselen tussen:

    • Kleurenpalet voor Material Design .
    • Aangepast kleurenpalet. Om de huidige kleur handmatig aan dit palet toe te voegen, klikt u hier. .
    • Palet met CSS-variabelen . Toont alle aangepaste CSS-variabelen (aangeduid met -- ) op uw pagina.
    • Paginakleurenpalet . Om dit palet te genereren, zoekt DevTools naar alle kleuren in uw stylesheets.

Kies een kleurruimte

Om een ​​kleurruimte te kiezen:

1. Houd de Shift-toets ingedrukt en klik op het voorbeeldpictogram naast een kleurwaarde. Er wordt een vervolgkeuzelijst geopend.

   

2. Kies een van de volgende kleurruimtes:

   • #<hex-color>
   • rgb(XXX / .X) .
   • hsl(XXX / X) .
   • hwb(XXX / .X) .

   Of een van de nieuwe ruimtes:

   • lch(XXX / .X)
   • oklch(XXX / .X)
   • lab(XXX / .X)
   • oklab(XXX / .X)

   Of een ruimte gedefinieerd door de functie color(<color_space> XXX) .

Kleuren omzetten

Wanneer u met de weergavewaardeschakelaar wisselt tussen kleurruimten, converteert DevTools de waarden automatisch.

Beweeg de muis over het pictogram om de oorspronkelijke waarde te zien.

De volgende video laat conversies in actie zien.

Contrast corrigeren

Om een ​​contrastprobleem bij een color op te lossen:

1. Open de kleurenkiezer naast de color .
2. Verhoog de contrastverhouding sectie.

3. Gebruik de voorgestelde kleur die aan de richtlijnen voldoet:

   • Klik naast de richtlijn.
   • Sleep in het voorbeeldvenster 'Schaduwen' bovenaan de cirkel met de kleur onder de bijbehorende lijn.

Standaard stelt de kleurenkiezer waarden voor die voldoen aan de APCA-normen .

U kunt er ook voor kiezen om waarden voor te stellen die voldoen aan de WebAIM-richtlijnen . Instellingen > Voorkeuren > Elementen , wis de Geavanceerd perceptueel contrastalgoritme (APCA)... selectievakje.

Om in één oogopslag een lijst te krijgen van alle contrastproblemen, volg je de handleiding 'Maak je website beter leesbaar' .

Test een kleur op een willekeurige plek met het pipetje.

De Met de pipetfunctie kunt u kleuren selecteren, zowel van de pagina als van elke willekeurige plek op het scherm.

Om een ​​kleur te selecteren vanaf een willekeurige plek op het scherm:

1. Open de kleurenkiezer en doe een van de volgende dingen:
   • Klik op knop.
   • Druk op C om de pipet te activeren. Om deze te deactiveren, drukt u op Escape .
2. Activeer het pipetgereedschap , beweeg de muis over de gewenste kleur en klik om een ​​kleurmonster te nemen.

In dit voorbeeld toont de kleurenkiezer een huidige kleurwaarde van rgb(224 255 255 / 15%) . Deze kleur verandert in roze zodra je buiten Chrome klikt.