Flag Rally Farbpalette
Flag Rally ist eine Palette aus 5 Farben, die auf Neutraltöne, Blautö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, #F77F00, 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, blau, orange und farbenblind-freundlich.
- Rich Navy #111111
- Prussian Blue #1D3557
- Cerulean #0077B6
- Orange Wheel #F77F00
- 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) |
| Cerulean | #0077B6 | rgb(0, 119, 182) | hsl(201, 100%, 36%) | oklch(54.6% 0.131 242.7) |
| Orange Wheel | #F77F00 | rgb(247, 127, 0) | hsl(31, 100%, 48%) | oklch(71.9% 0.179 54.4) |
| Honeydew | #F1FAEE | rgb(241, 250, 238) | hsl(105, 55%, 96%) | oklch(97.5% 0.018 137.8) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Flag Rally, 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 #F77F00 | 7.19:1 | AAA | Lc 52.8 |
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-0077b6-f77f00-f1faee.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.