Abyss and Lunar Farbpalette
Abyss and Lunar ist eine Palette aus 5 Farben, die auf Neutraltöne, Blautöne und Türkis- und Cyantöne aufbaut. In OKLCH reicht die Helligkeit von 26 % (#182431, dunkel) bis 93 % (#E2E8F0, sehr hell), und die gesättigtste Farbe, #309DC8, ist mäßig gesättigt. 3 ihrer 3 chromatischen Farben liegen auf der kühlen Seite des Farbkreises. 4 ihrer 10 Farbpaare erreichen das WCAG-AA-Verhältnis von 4,5:1 für Fließtext. Sie ist getaggt mit kalt, blau, gedämpft und ruhig.
- Oxford Blue #182431
- YInMn Blue #475569
- Blue NCS #309DC8
- Cool Steel #94A3B8
- Gainsboro #E2E8F0
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Oxford Blue | #182431 | rgb(24, 36, 49) | hsl(211, 34%, 14%) | oklch(25.6% 0.03 251) |
| YInMn Blue | #475569 | rgb(71, 85, 105) | hsl(215, 19%, 35%) | oklch(44.6% 0.037 257.3) |
| Blue NCS | #309DC8 | rgb(48, 157, 200) | hsl(197, 61%, 49%) | oklch(65.4% 0.114 229.2) |
| Cool Steel | #94A3B8 | rgb(148, 163, 184) | hsl(215, 20%, 65%) | oklch(71.1% 0.035 256.8) |
| Gainsboro | #E2E8F0 | rgb(226, 232, 240) | hsl(214, 32%, 91%) | oklch(92.9% 0.013 255.5) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Abyss and Lunar, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #E2E8F0 auf #182431 | 12.75:1 | AAA | Lc -89.9 |
| #E2E8F0 auf #475569 | 6.15:1 | AA | Lc -75.7 |
| #182431 auf #94A3B8 | 6.13:1 | AA | Lc 50.4 |
Farbsehen
1 Farbpaar kommt in mindestens einer Simulation auf ΔE 0.06 aneinander heran.
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/182431-475569-309dc8-94a3b8-e2e8f0.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.