Ripple Glass Farbpalette
Ripple Glass ist eine Palette aus 5 Farben, die auf Türkis- und Cyantöne, Blautöne und Orangetöne aufbaut. In OKLCH reicht die Helligkeit von 21 % (#001D21, sehr dunkel) bis 91 % (#B9EFE6, sehr hell), und die gesättigtste Farbe, #E9C46A, ist mäßig gesättigt. 4 ihrer 5 chromatischen Farben liegen auf der kühlen Seite des Farbkreises. 5 ihrer 10 Farbpaare erreichen das WCAG-AA-Verhältnis von 4,5:1 für Fließtext. Sie ist getaggt mit ozean, ruhig, türkis, gelb und farbenblind-freundlich.
- Rich Black #001D21
- Charcoal #2F4858
- Persian Green #4FA7A1
- Saffron #E9C46A
- Diamond #B9EFE6
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Black | #001D21 | rgb(0, 29, 33) | hsl(187, 100%, 6%) | oklch(21.1% 0.036 207.4) |
| Charcoal | #2F4858 | rgb(47, 72, 88) | hsl(203, 30%, 26%) | oklch(38.8% 0.041 237.3) |
| Persian Green | #4FA7A1 | rgb(79, 167, 161) | hsl(176, 36%, 48%) | oklch(67.3% 0.085 189.4) |
| Saffron | #E9C46A | rgb(233, 196, 106) | hsl(43, 74%, 66%) | oklch(83.4% 0.117 87.4) |
| Diamond | #B9EFE6 | rgb(185, 239, 230) | hsl(170, 63%, 83%) | oklch(91.3% 0.056 183.7) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Ripple Glass, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #B9EFE6 auf #001D21 | 13.82:1 | AAA | Lc -89.2 |
| #001D21 auf #E9C46A | 10.49:1 | AAA | Lc 72.6 |
| #B9EFE6 auf #2F4858 | 7.56:1 | AAA | Lc -79.1 |
Farbsehen
Kein Farbpaar kommt bei Protanopie, Deuteranopie, Tritanopie oder Achromatopsie auf ΔE 0.06 an eine andere Farbe heran. Sie ist als farbenblind-freundlich getaggt: Jedes Paar bleibt mindestens ΔE 0,14 auseinander.
Protanopie
Deuteranopie
Tritanopie
Achromatopsie
Im Code verwenden
Installiere diese Farben mit shadcn als Tailwind-CSS-v4-Theme-Farben: npx shadcn@latest add https://getcolors.so/r/palette/001d21-2f4858-4fa7a1-e9c46a-b9efe6.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.