Gravestone and Bat Farbpalette
Gravestone and Bat ist eine Palette aus 5 Farben, die auf Brauntöne und Grüntöne aufbaut. In OKLCH reicht die Helligkeit von 21 % (#121B00, sehr dunkel) bis 94 % (#DAF6BC, sehr hell), und die gesättigtste Farbe, #618617, ist mäßig gesättigt. Ihre Farben haben zu wenig Chroma, um warm oder kühl zu wirken. 3 ihrer 10 Farbpaare erreichen das WCAG-AA-Verhältnis von 4,5:1 für Fließtext. Sie ist getaggt mit halloween, monochrom, farbverlauf, grün und farbenblind-freundlich.
- Rich Navy #121B00
- Pakistan Green #374E00
- Olive #618617
- Muted Teal #9ABD6E
- Tea Green #DAF6BC
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Navy | #121B00 | rgb(18, 27, 0) | hsl(80, 100%, 5%) | oklch(20.6% 0.052 124.8) |
| Pakistan Green | #374E00 | rgb(55, 78, 0) | hsl(78, 100%, 15%) | oklch(39% 0.1 126.5) |
| Olive | #618617 | rgb(97, 134, 23) | hsl(80, 71%, 31%) | oklch(57.2% 0.139 127.3) |
| Muted Teal | #9ABD6E | rgb(154, 189, 110) | hsl(87, 37%, 59%) | oklch(75.4% 0.112 128.3) |
| Tea Green | #DAF6BC | rgb(218, 246, 188) | hsl(89, 76%, 85%) | oklch(93.8% 0.081 128.8) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Gravestone and Bat, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #DAF6BC auf #121B00 | 15.13:1 | AAA | Lc -94.8 |
| #121B00 auf #9ABD6E | 8.35:1 | AAA | Lc 60.8 |
| #DAF6BC auf #374E00 | 7.94:1 | AAA | Lc -83.7 |
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/121b00-374e00-618617-9abd6e-daf6bc.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.