Articles

Kleuren omzetten

Omzettingen – Details – Harmonieën – Afbeeldingen – Preview – Kleurenblindheid simulatie – CSS – Help

Omzettingen

Hier ziet u uw kleur omgezet in 15 verschillende kleurformaten zoals RGB, CMYK, HSV, HSL, CIELab, Android, Decimal, en YUV.

🤖 Converteer meerdere kleuren tegelijk of 📢 verkrijg Conversies en Harmonies via de REST API.

Conversies Deel 1
Formaat Kleur
Hex B76E79 📋
RGB 183, 110, 121 📋
RGB Percentage 72%, 43%, 47% 📋
CMY 0.2824, 0.5686, 0.5255 📋
CMYK 0.00, 0.40, 0.34, 0.28 📋
HSL 351°, 34%, 57% 📋
HSV 351°, 40%, 72% 📋
XYZ 28.5556, 22.5996, 20.9463 📋
CIELab

Omzettingen Deel 2
Formaat Kleur
RYB 183, 110, 121 📋
Decimal 12021369 📋
54.66, 30.32, 6.37 📋
CIELCh 55, 30.982, 11.862 📋
Yxy 22.5996, 0.3960, 0.3134 📋
Android (android.graphics.Color) 4290211449 (0xFFB76E79) 📋
YUV 133.0810, -5.9559, 43.7790 📋

Book Cover

📕 HOECOLORS.WORK

Een CSS kleuren notatie gids.

of koop het op Leanpub!

Details

De Hex kleur B76E79 is een donkere kleur, en de websafe versie is hex 996666, en de kleurnaam is rose gold. Een complement van deze kleur zou 6EB7AC zijn, en de grijswaardenversie is 858585.
Een 20% lichtere versie van de originele kleur is F1A3AD, en 803D49 is de 20% donkerdere kleur. Als u de kleur 10% verzadigt, krijgt u B75C69, en als u 10% onverzadigt, is het B78089.

Verdeling

RGB Kleur Verdeling De verdeling van de RGB waarden, rood, groen en blauw.Rood Het Perecentage rood in de kleur.Groen Het Perecentage groen in de kleur.Blauw Het percentage blauw in de kleur.RGB
  • Rood (72%)
  • Groen (43%)
  • Blauw (47%)
RYB Color Distribution De verdeling van de RYB-waarden, rood, geel en blauw.Rood Het percentage rood in de kleur.Geel Het percentage geel in de kleur.Blauw Het percentage blauw in de kleur.RYB
  • Rood (72%)
  • Geel (43%)
  • Blauw (47%)
CMYK-kleurverdeling De verdeling van de CMYK-waarden, Cyaan, Magenta, Geel en Zwart.Cyaan Het percentage cyaan in de kleur.Magenta Het percentage magenta in de kleur.Geel Het percentage geel in de kleur.Zwart Het percentage zwart in de kleur.CMYK
  • Cyaan (0%)
  • Magenta (40%)
  • Geel (34%)
  • Zwart (28%)
CMY-kleurverdeling De verdeling van de CMY-waarden, Cyaan, Magenta, Geel.Cyaan Het percentage cyaan in de kleur.Magenta Het percentage magenta in de kleur.Geel Het percentage geel in de kleur.CMY
  • Cyaan (28%)
  • Magenta (57%)
  • Geel (53%)

Helderheid &Verzadigingsverlopen

Deze kleurverlopen laten zien hoe de hex-kleur B76E79 verandert door de helderheid met 10 procent te veranderen. De eerste figuur toont een verschuiving met +10% voor elke kleur en de tweede figuur -10%.

Gelijk aan de helderheidsverlopen, maar de volgende verzadigingsverlopen tonen een verandering van de Hex kleur B76E79 door in plaats daarvan de verzadiging met 10% te veranderen.

Harmonieën

Analoog

De analoge kleurenharmonie bestaat uit drie kleuren die naast elkaar liggen op de kleurencirkel.

  • AD7094
  • B76E79
  • B37360

Triade

De driekleurharmonie groepeert drie kleuren die op gelijke afstand van elkaar liggen en een driehoek vormen op het kleurenwiel.

  • B76E79
  • 6C8C5A
  • 3F8AB5

Complementair

Het complementaire kleurenschema is een paar kleuren die tegenover elkaar staan op het kleurenwiel.

  • B76E79
  • 6EB7AC

Split Complementair

Split-complementaire kleuren verschillen van het complementaire kleurenschema. Het schema bestaat uit drie kleuren, de oorspronkelijke kleur en twee buren van de complementaire kleur.

  • 118FA6
  • B76E79
  • 4B9071

Vierkant

Het vierkantschema is als het rechthoek-kleurenschema, maar de vier kleuren zijn gelijkmatig verdeeld over het kleurenwiel.

  • B76E79
  • 8A854E
  • 24918D
  • 6D82B7

Rectangle

Het rechthoekige kleurenschema bestaat uit vier kleuren die een rechthoek vormen op het kleurenwiel.

  • B76E79
  • A97854
  • 24918D
  • 2F8CB1

Sweetspot

De sweet spot groepeert de oorspronkelijke kleur en vijf complementaire kleuren.

  • B76E79
  • EDD1D5
  • AB6EB7
  • 78676A
  • F7F7F7
  • 787878

SVG-afbeeldingen

Een selectie SVG-afbeeldingen die de hex-versie #B76E79 van de huidige kleur gebruiken.

Previews

Witte achtergrond

Deze preview laat zien hoe de Hex kleur B76E79 eruit ziet op een witte achtergrond.

Color Contrast Check

Grote tekst (boven 18pt) WCAG AA ✓ Pass
Elke tekst WCAG AA ✕ Fail
Grote tekst (boven 18pt) WCAG AAA ✕ Mislukt
Elke tekst WCAG AAA ✕ Mislukt

Als u wilt controleren met andere kleurencombinaties, probeer dan de Kleurcontrast-checker.

Zwarte achtergrond

Deze voorvertoning laat zien hoe de Hex kleur B76E79 eruit ziet op een zwarte achtergrond.

Color Contrast Check

Grote tekst (boven 18pt) WCAG AA ✓ Pass
Elke tekst WCAG AA ✓ Pass
Grote tekst (boven 18pt) WCAG AAA ✓ Pass
Elke tekst WCAG AAA ✕ Fail

Als u wilt controleren met andere kleurencombinaties, probeer dan de Kleurcontrast-checker.

Hex B76E79 Achtergrond

Deze preview laat zien hoe zwarte tekst eruit ziet op een achtergrond met de hex-kleur B76E79.

Deze voorvertoning laat zien hoe witte tekst eruitziet op een achtergrond met de Hex-kleur B76E79.

Simulatie van kleurenblindheid

Kleurenblindheid is een zeer complex onderwerp, en ik zou de verschillende oorzaken niet beter kunnen beschrijven dan Wikipedia doet, dus als u meer wilt weten, moet u hun artikel over kleurenblindheid maar eens bekijken.

Dichromie

Originele kleur
B76E79

Protanopia
858384

Deuteranopia
957E76

Tritanopia
B76E77

Trichromacy

Original Color
B76E79

Protanomalie
977B80

Deuteranomalie
A17877

Tritanomalie
B76E78

Monochromatiek

Originele kleur
B76E79

Achromatopsie
8585

Achromatomaly
977D81

CSS Voorbeelden

Text

De CSS eigenschap om de kleur van de tekst te veranderen in Hex B76E79 wordt “color” genoemd. De color eigenschap kan worden ingesteld op classes, ids of direct op het HTML element.

Dit voorbeeld laat zien hoe tekst in de kleur #B76E79 eruit ziet.

.text, #text, p{color:#B76E79}

📋 Copy Code

Als je een tekst schaduw wilt toevoegen in die kleur gebruik dan de text-shadow eigenschap, je kunt direct een tekst schaduw genereren met onze 🔧 CSS Text Shadow Generator.

Hier ziet u hoe zwarte tekst met een 4 pixel #B76E79 gekleurde schaduw eruit ziet.

.shadow{ text-shadow: 4px 4px 2px #B76E79 } 
📋 Copy Code

Border

De CSS eigenschap om de rand van een element te veranderen in Hex B76E79 heet “border”. De border eigenschap kan worden ingesteld op classes, ids of direct op het HTML element.

Dit voorbeeld toont de kleur als border, deze kan worden toegepast via de CSS eigenschap “border” of “border-color”.

.border, #border, table{ border:4px solid #B76E79 }
📋 Copy Code

Als alleen de border kleur moet worden gewijzigd gebruik dan de eigenschap border-color.

.border{ border-color:#B76E79 }
📋 Copy Code

Als je een kaderschaduw in die kleur wilt toevoegen gebruik je:

Hier zie je hoe een kader met een 4 pixel #B76E79 gekleurde schaduw eruit ziet.

.boxshadow{ -moz-box-shadow:4px 4px 4px 4px #B76E79; -webkit-box-shadow:4px 4px 4px 4px #B76E79; box-shadow:4px 4px 4px 4px #B76E79 }
📋 Copy Code

Background

De CSS eigenschap om de achtergrondkleur van een element te veranderen in Hex B76E79 wordt “background” genoemd. De background eigenschap kan worden ingesteld op classes, ids of direct op het HTML element.

.background, #background, body{ background:#B76E79 }
📋 Copy Code

Als alleen de achtergrondkleur moet worden gewijzigd kan worden gebruikt:

.background{ background-color:#B76E79 }
📋 Copy Code

Dit voorbeeld toont de kleur als achtergrond, deze wordt toegepast via de CSS eigenschap “background”.

Om uw CSS code te optimaliseren en te comprimeren, kunt u gebruik maken van onze online CSS compressor en optimizer gebaseerd op csstidy. Als u een lineair of radiaal kleurverloop als achtergrond of rand wilt maken, bekijk dan onze 🌈 CSS Kleurverloop Generator.

Boekomslag

📕 HOECOLORS.WORK

Een CSS kleuren notatie gids.

of koop het op Leanpub!

Hoe kleuren converteren te gebruiken

Conversie

Om te converteren, plak een string in een van deze kleurformaten, bijvoorbeeld “B76E79”, in het invoerveld en klik op converteren. Het resultaat komt in de sectie Conversies te staan, en de volgende secties geven u verdere details over de kleur.

Sommige kleurformaten gebruiken dezelfde notatie, en de conversie zal de samenstelling van de zoekopdracht raden. Als voorbeeld, als u probeert om de string “351°, 40%, 72%” om te zetten, kan het een HSV of HSL kleur zijn, de omzetting zal HSL aannemen in dit geval.

Omdat dit kan leiden tot verkeerde omzettingen, kunt u definiëren welk formaat u doorgeeft door uw kleur string tussen haakjes te wikkelen met het formaat ervoor. De zoek string “HSV(351°, 40%, 72%)” zal je de juiste HSV kleur geven omdat het formaat niet geraden hoeft te worden. Andere voorbeelden zouden zijn “CIELAB(54.66, 30.32, 6.37)”, “CIELCH(55, 30.982, 11.862)”, “YXY(22.5996, 0.3960, 0.3134)” en “CMYK(0.00, 0.40, 0.34, 0.28)”.

Details

In de details sectie, krijgt u eerst een samenvatting van de kleur en, indien beschikbaar, een beschrijving zoals “donker gedempt rood”. U kunt de kleurverdeling in verschillende formaten zien. Bijvoorbeeld, in het RGB-formaat, krijgt u de hoeveelheid rood, groen en blauw in uw kleur te zien.

Als laatste, krijgt u helderheid en verzadiging gradiënten van uw kleur in 10% stappen. Dus als u een helderdere of donkerdere versie nodig hebt, kunt u die hier kiezen.

Harmonieën

De harmonieën laten u in principe kleuren zien die goed passen bij de kleur die u op dat moment bekijkt. Als een van de harmonieën u bevalt, kunt u er direct een 🌈 CSS Gradient of 🔧 CSS Text Shadow van maken of de harmonie bekijken als een 🖌️ Color Bucket.

SVG Images

Deze korte sectie toont u een selectie van SVG bestanden die gebruik maken van de huidige kleur. U kunt deze bestanden downloaden en gebruiken in uw projecten, bijvoorbeeld als achtergrondafbeelding.

Voorbeelden

Wilt u zien hoe uw kleur eruit ziet op een witte of zwarte achtergrond? Dan moet u eens kijken in het gedeelte “Previews” van de kleurenpagina.

U ziet ook het kleurcontrast van uw kleur op deze achtergronden en u krijgt een link naar de Color Contrast Checker met uw kleur voorgeselecteerd.

Color Blindness Simulation

Wanneer u een kleur voor uw project selecteert, wilt u misschien in gedachten houden hoe deze kleur wordt waargenomen door iemand met een kleurentekort. Daarom heb ik deze sectie toegevoegd die je voorbeelden laat zien van je kleur voor verschillende kleurwaarnemingsproblemen.

CSS Voorbeelden

Als je nieuw bent in webontwikkeling, wil je misschien zien hoe je je kleur toepast als voorgrond-, achtergrond-, of randkleur. De “CSS Examples” sectie geeft u precies dit, hulp hoe de huidige kleur te gebruiken in CSS.

Als u een kleur bekijkt in een formaat dat niet beschikbaar is in CSS, dan ziet u de kleur geconverteerd naar een compatibel formaat.

Color Bucket

U hebt besloten over kleuren voor uw volgende project en u wilt ze downloaden als een palet of ze delen met vrienden om uw beslissing te bespreken? Dan moet je eens kijken naar de color bucket. Hiermee kunt u tot 10 kleuren opslaan, automatisch kleurpaletten maken voor elk van deze kleuren op basis van de lichtheid, en het geeft u een WCAG matrix.

U kunt elk van de kleurpaletten of de geselecteerde kleuren downloaden als een GIMP, Adobe® ASE, of Tailwind CSS palet. Bovendien kunt u alles bekijken als een 🌈 CSS Gradient, 🔧 CSS Text Shadow, of 📷 Color Palette Image.

Om een kleur aan uw color bucket toe te voegen, zet ik een link “❤️ Add this color to the bucket” in de header sectie van elke pagina op deze website.

Color Contrast Checker

Wanneer u beslist over kleuren voor een project, is het essentieel om het kleurcontrast in het achterhoofd te houden. Met mijn kleurcontrast-checker kunt u de kleuren die u hebt gekozen controleren volgens de Web Content Accessibility Guidelines (WCAG) 2.0.

Geef een reactie

Het e-mailadres wordt niet gepubliceerd. Vereiste velden zijn gemarkeerd met *