Puddle Recess Farbpalette
Puddle Recess ist eine Palette aus 5 Farben, die auf Grüntöne und Gelbtöne aufbaut. In OKLCH reicht die Helligkeit von 25 % (#002A15, dunkel) bis 94 % (#F8ECBE, sehr hell), und die gesättigtste Farbe, #708A41, ist mäßig gesättigt. 2 ihrer 5 chromatischen Farben liegen auf der warmen Seite des Farbkreises. 3 ihrer 10 Farbpaare erreichen das WCAG-AA-Verhältnis von 4,5:1 für Fließtext. Sie ist getaggt mit kinder, farbverlauf, grün, gelb, ruhig und farbenblind-freundlich.
- Jet #002A15
- Dark Moss Green #2D5B25
- Olive #708A41
- Muted Teal #B7B976
- Champagne #F8ECBE
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #002A15 | rgb(0, 42, 21) | hsl(150, 100%, 8%) | oklch(25.1% 0.061 156.2) |
| Dark Moss Green | #2D5B25 | rgb(45, 91, 37) | hsl(111, 42%, 25%) | oklch(42.5% 0.098 140.8) |
| Olive | #708A41 | rgb(112, 138, 65) | hsl(81, 36%, 40%) | oklch(59.6% 0.104 125.6) |
| Muted Teal | #B7B976 | rgb(183, 185, 118) | hsl(62, 32%, 59%) | oklch(76.8% 0.088 109.8) |
| Champagne | #F8ECBE | rgb(248, 236, 190) | hsl(48, 81%, 86%) | oklch(94.1% 0.061 95.1) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Puddle Recess, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #F8ECBE auf #002A15 | 13.21:1 | AAA | Lc -92.4 |
| #002A15 auf #B7B976 | 7.61:1 | AAA | Lc 60.1 |
| #F8ECBE auf #2D5B25 | 6.73:1 | AA | Lc -79.6 |
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/002a15-2d5b25-708a41-b7b976-f8ecbe.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.