Caramel
Toasted and natural tones for a grounded feel.
by Colorffy Team
About
Main Actions
Quick actions
Explore the palette in different formats, and quick actions.
Colors overview
Comprehensive color information and conversions.
| Color | HEX | RGB | HWB | OKLAB | OKLCH | P3 | Actions |
|---|---|---|---|---|---|---|---|
| | #7b3f00 | rgb(48.2% 24.7% 0%) | hwb(31 0% 52%) | oklab(43.5% 0.057 0.088) | oklch(43.5% 0.105 57) | color(display-p3 0.451 0.259 0.078) | |
| | #b27a54 | rgb(69.8% 47.8% 32.9%) | hwb(24 33% 30%) | oklab(62.8% 0.051 0.071) | oklch(62.8% 0.088 54.6) | color(display-p3 0.666 0.488 0.353) | |
| | #d3a772 | rgb(82.7% 65.5% 44.7%) | hwb(33 45% 17%) | oklab(75.7% 0.028 0.082) | oklch(75.7% 0.087 71.1) | color(display-p3 0.8 0.662 0.476) | |
| | #e5c494 | rgb(89.8% 76.9% 58%) | hwb(36 58% 10%) | oklab(83.7% 0.017 0.071) | oklch(83.7% 0.073 76.8) | color(display-p3 0.877 0.773 0.604) | |
| | #faebd7 | rgb(98% 92.2% 84.3%) | hwb(34 84% 2%) | oklab(94.7% 0.008 0.03) | oklch(94.7% 0.031 75.2) | color(display-p3 0.97 0.924 0.852) |
Click on a color value to copy it to your clipboard.
Contrast ratios checker
Click one color card to view the complete contrast checker tests.
Contrast Checker Explanations
Live APCA (WCAG 3 draft) and WCAG 2.1 contrast calculations comparing selected text color against surface colors.
Body Pass
Large Pass
Fail
#7B3F00
AAA - 8.22
Lc -93
#B27A54
Fail - 3.61
Lc -69
#D3A772
Fail - 2.2
Lc -48
#E5C494
Fail - 1.65
Lc -33
#FAEBD7
Fail - 1.17
Lc -10
Color blindness
The simulation of color blindness may not be 100% accurate sometimes.
Colors preview as gradient with Protanopia
Colors preview as palette with Protanopia
UI components preview
Preview the palette in different UI components.