Kleuren omzetten

Details

De RGB-kleur 73, 108, 60 is een donkere kleur, en de websafe-versie is hex 336633. Een complement van deze kleur zou zijn 95, 60, 108, en de grijstintenversie is 92, 92, 92.
Een 20% lichtere versie van de oorspronkelijke kleur is 123, 160, 108, en 26, 60, 16 is de 20% donkerdere kleur. Als u de kleur met 10% verzadigt, krijgt u 65, 108, 49, en als u 10% desaturate, is het 81, 108, 71.

Distribution

Brightness & Saturation Gradients

Deze gradiënten laten zien hoe de RGB-kleur 73, 108, 60 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 RGB-kleur 73, 108, 60 door in plaats daarvan de verzadiging met 10% te wijzigen.

Harmonieën

Hoe te gebruiken Kleuren converteren

Conversie

Om te converteren, plak een string in een van deze kleurformaten, bijvoorbeeld, “496C3C”, in het invoerveld en klik op converteren. Het resultaat zal in de sectie Conversies staan, en de volgende secties zullen u voorzien van 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 “104°, 44%, 42%” te converteren, kan het een HSV of HSL kleur zijn, de conversie zal HSL aannemen in dit geval.

Omdat dit kan leiden tot verkeerde conversies, kunt u definiëren welk formaat u doorgeeft door uw kleur string tussen haakjes te wikkelen met het formaat ervoor. De zoek string “HSV(104°, 44%, 42%)” zal u de correcte HSV kleur geven omdat het formaat niet geraden hoeft te worden. Andere voorbeelden zouden zijn “CIELAB(41.95, -22.52, 22.92)”, “CIELCH(42, 32.133, 134.485)”, “YXY(12.4678, 0.3233, 0.4517)” en “CMYK(0.32, 0.00, 0.44, 0.58)”.

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 harmonies 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 in uw projecten gebruiken, bijvoorbeeld als achtergrondafbeelding.

Previews

Wilt u zien hoe uw kleur eruit ziet op een witte of zwarte achtergrond? Dan moet u eens kijken in de “Previews” sectie 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 web ontwikkeling, wil je misschien zien hoe je je kleur kunt toepassen als voorgrond, achtergrond of rand kleur. 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 u 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 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 kleuren voor een project beslist, is het essentieel om het kleurcontrast in gedachten te houden. Met mijn kleurcontrast-checker kunt u de kleuren die u hebt gekozen controleren volgens de richtlijnen voor toegankelijkheid van webinhoud (WCAG) 2.0.