Gradient
Vibes
by Colorffy Team
About
Yellow
Orange
Pink
retro
Main Actions
Quick actions
Explore the gradient in different formats, and quick actions.
Colors overview
Comprehensive color information and conversions.
| Color | HEX | RGB | HWB | OKLAB | OKLCH | P3 | Actions |
|---|---|---|---|---|---|---|---|
| | #ffd12a | rgb(100% 82% 16.5%) | hwb(47 16% 0%) | oklab(87.6% -0.005 0.17) | oklch(87.6% 0.171 91.7) | color(display-p3 0.971 0.826 0.321) | |
| | #ffb547 | rgb(100% 71% 27.8%) | hwb(36 28% 0%) | oklab(82.4% 0.043 0.142) | oklch(82.4% 0.149 73.3) | color(display-p3 0.957 0.722 0.362) | |
| | #ff9863 | rgb(100% 59.6% 38.8%) | hwb(20 39% 0%) | oklab(77.7% 0.096 0.104) | oklch(77.7% 0.141 47.1) | color(display-p3 0.944 0.615 0.428) | |
| | #ff7b80 | rgb(100% 48.2% 50.2%) | hwb(360 48% 0%) | oklab(73.7% 0.152 0.054) | oklch(73.7% 0.161 19.5) | color(display-p3 0.935 0.511 0.515) | |
| | #ff5e9d | rgb(100% 36.9% 61.6%) | hwb(340 37% 0%) | oklab(70.8% 0.203 -0.002) | oklch(70.8% 0.203 359) | color(display-p3 0.927 0.412 0.612) |
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
Lc ≥ 60 · ≥ 4.5:1
Large Pass
Lc ≥ 45 · ≥ 3.0:1
Fail
Below thresholds
#FFD12A
Fail - 1.45
Lc -25
#FFB547
Fail - 1.75
Lc -36
#FF9863
Fail - 2.11
Lc -46
#FF7B80
Fail - 2.5
Lc -54
#FF5E9D
Fail - 2.86
Lc -59
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 gradient in different UI components.
32°
CPU
48°
GPU
100%
Usage
11°
Rain
70%
Storage
PWA Prompt