Gingerbread Fireside Farbpalette
Gingerbread Fireside ist eine Palette aus 5 Farben, die auf Rottöne und Rosatöne aufbaut. In OKLCH reicht die Helligkeit von 22 % (#39030C, sehr dunkel) bis 94 % (#FFE3DF, sehr hell), und die gesättigtste Farbe, #BC5151, ist mäßig gesättigt. 5 ihrer 5 chromatischen Farben liegen auf der warmen 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 weihnachten, winter, monochrom, farbverlauf, rot und farbenblind-freundlich.
WeihnachtenWinterMonochromFarbverlaufRotFarbenblind-freundlich
- Jet #39030C
- Maroon #74272C
- Sinopia #BC5151
- Sweet Salmon #F29891
- Apricot #FFE3DF
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Jet | #39030C | rgb(57, 3, 12) | hsl(350, 90%, 12%) | oklch(22.3% 0.083 17.6) |
| Maroon | #74272C | rgb(116, 39, 44) | hsl(356, 50%, 30%) | oklch(39% 0.108 19.9) |
| Sinopia | #BC5151 | rgb(188, 81, 81) | hsl(0, 44%, 53%) | oklch(57.2% 0.139 22.5) |
| Sweet Salmon | #F29891 | rgb(242, 152, 145) | hsl(4, 79%, 76%) | oklch(77% 0.109 24.7) |
| Apricot | #FFE3DF | rgb(255, 227, 223) | hsl(7, 100%, 94%) | oklch(93.8% 0.031 27.4) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Gingerbread Fireside, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #FFE3DF auf #39030C | 14.51:1 | AAA | Lc -91.8 |
| #FFE3DF auf #74272C | 8.36:1 | AAA | Lc -82.7 |
| #39030C auf #F29891 | 8.12:1 | AAA | Lc 59.1 |
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/39030c-74272c-bc5151-f29891-ffe3df.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.