Bonbon Tin Farbpalette
Bonbon Tin ist eine Palette aus 5 Farben, die auf Rottöne und Violetttöne aufbaut. In OKLCH reicht die Helligkeit von 31 % (#4B1E2D, dunkel) bis 90 % (#E9D6FF, sehr hell), und die gesättigtste Farbe, #C3A1CC, ist mäßig gesättigt. 2 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 farbverlauf, violett, ruhig und farbenblind-freundlich.
- Space Cadet #4B1E2D
- Dusty Grape #73465E
- English Lavender #9C7294
- French Gray #C3A1CC
- Light Gray #E9D6FF
Farbcodes
| Farbe | HEX | RGB | HSL | OKLCH |
|---|---|---|---|---|
| Space Cadet | #4B1E2D | rgb(75, 30, 45) | hsl(340, 43%, 21%) | oklch(30.6% 0.071 1.2) |
| Dusty Grape | #73465E | rgb(115, 70, 94) | hsl(328, 24%, 36%) | oklch(45.4% 0.07 347) |
| English Lavender | #9C7294 | rgb(156, 114, 148) | hsl(311, 18%, 53%) | oklch(60.5% 0.071 333.3) |
| French Gray | #C3A1CC | rgb(195, 161, 204) | hsl(287, 30%, 72%) | oklch(75.3% 0.071 319.1) |
| Light Gray | #E9D6FF | rgb(233, 214, 255) | hsl(268, 100%, 92%) | oklch(90.4% 0.059 306.2) |
Barrierefreiheit
Die besten Text-Hintergrund-Paare in Bonbon Tin, nach WCAG-2-Kontrastverhältnis, mit dem APCA-Helligkeitskontrast (Lc) des Textes auf seinem Hintergrund.
| Paar | WCAG 2 | Stufe | APCA Lc |
|---|---|---|---|
| #E9D6FF auf #4B1E2D | 10.20:1 | AAA | Lc -81.6 |
| #4B1E2D auf #C3A1CC | 6.10:1 | AA | Lc 53.4 |
| #E9D6FF auf #73465E | 5.61:1 | AA | Lc -69.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/4b1e2d-73465e-9c7294-c3a1cc-e9d6ff.json.
Mach sie zu deiner
Bearbeite die Farben, baue daraus ein vollständiges helles und dunkles Farbsystem oder sieh sie in echter UI.