Sienna Patio Farbpalette
Sienna Patio ist eine Palette aus 5 Farben, die auf Brauntöne, Rottöne, Gelbtöne und Orangetöne aufbaut. In OKLCH reicht die Helligkeit von 23 % (#1A1F00, sehr dunkel) bis 95 % (#FFEBCE, sehr hell), und die gesättigtste Farbe, #BDB078, ist mäßig gesättigt. 4 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 erdig, warm, gelb, gedämpft, ruhig und farbenblind-freundlich.
- Jet #1A1F00
- Dim Gray #5B443F
- Gray #8D7569
- Earth Yellow #BDB078
- Champagne #FFEBCE
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #1A1F00 | rgb(26, 31, 0) | hsl(70, 100%, 6%) | oklch(22.6% 0.053 118) |
| Dim Gray | #5B443F | rgb(91, 68, 63) | hsl(11, 18%, 30%) | oklch(41% 0.033 32.5) |
| Gray | #8D7569 | rgb(141, 117, 105) | hsl(20, 15%, 48%) | oklch(58.2% 0.035 48.1) |
| Earth Yellow | #BDB078 | rgb(189, 176, 120) | hsl(49, 34%, 61%) | oklch(75.5% 0.076 96.7) |
| Champagne | #FFEBCE | rgb(255, 235, 206) | hsl(36, 100%, 90%) | oklch(94.9% 0.044 77.2) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Sienna Patio, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #FFEBCE auf #1A1F00 | 14.54:1 | AAA | Lc -94.8 |
| #1A1F00 auf #BDB078 | 7.78:1 | AAA | Lc 58.9 |
| #FFEBCE auf #5B443F | 7.69:1 | AAA | Lc -83.5 |
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/1a1f00-5b443f-8d7569-bdb078-ffebce.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.