Kleuren omzetten

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

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

SVG-afbeeldingen

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

Previews

Hex B76E79 Achtergrond

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

Trichromacy

Monochromatiek

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}

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.