Bauhaus Press Farbpalette
Bauhaus Press ist eine Palette aus 5 Farben, die auf Neutraltöne, Blautöne, Türkis- und Cyantöne und Orangetöne aufbaut. In OKLCH reicht die Helligkeit von 18 % (#111111, sehr dunkel) bis 98 % (#F1FAEE, sehr hell), und die gesättigtste Farbe, #FCBF49, ist leuchtend. 2 ihrer 3 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 business, gelb und farbenblind-freundlich.
- Rich Navy #111111
- Prussian Blue #1D3557
- Persian Green #2A9D8F
- Maximum Yellow Red #FCBF49
- Honeydew #F1FAEE
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Rich Navy | #111111 | rgb(17, 17, 17) | hsl(0, 0%, 7%) | oklch(17.8% 0 0) |
| Prussian Blue | #1D3557 | rgb(29, 53, 87) | hsl(215, 50%, 23%) | oklch(32.8% 0.068 257.3) |
| Persian Green | #2A9D8F | rgb(42, 157, 143) | hsl(173, 58%, 39%) | oklch(63% 0.101 183) |
| Maximum Yellow Red | #FCBF49 | rgb(252, 191, 73) | hsl(40, 97%, 64%) | oklch(84% 0.147 80.5) |
| Honeydew | #F1FAEE | rgb(241, 250, 238) | hsl(105, 55%, 96%) | oklch(97.5% 0.018 137.8) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Bauhaus Press, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #F1FAEE auf #111111 | 17.67:1 | AAA | Lc -102.3 |
| #F1FAEE auf #1D3557 | 11.56:1 | AAA | Lc -96.4 |
| #111111 auf #FCBF49 | 11.41:1 | AAA | Lc 74.4 |
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/111111-1d3557-2a9d8f-fcbf49-f1faee.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.