Purity
A gentle transition from pure white to soft gray, creating a calm and clean effect.
by Colorffy Team
About
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 |
|---|---|---|---|---|---|---|---|
| | #fff | rgb(100% 100% 100%) | hwb(none 100% 0%) | oklab(100% 0 0) | oklch(100% 0 none) | color(display-p3 1 1 1) | |
| | #f5f5f5 | rgb(96.1% 96.1% 96.1%) | hwb(none 96% 3.9%) | oklab(97% 0 0) | oklch(97% 0 none) | color(display-p3 0.961 0.961 0.961) | |
| | #eee | rgb(93.3% 93.3% 93.3%) | hwb(none 93% 6.7%) | oklab(94.9% 0 0) | oklch(94.9% 0 none) | color(display-p3 0.933 0.933 0.933) | |
| | #e0e0e0 | rgb(87.8% 87.8% 87.8%) | hwb(none 88% 12%) | oklab(90.7% 0 0) | oklch(90.7% 0 none) | color(display-p3 0.878 0.878 0.878) | |
| | #d5d5d5 | rgb(83.5% 83.5% 83.5%) | hwb(none 84% 16%) | oklab(87.3% 0 0) | oklch(87.3% 0 none) | color(display-p3 0.835 0.835 0.835) | |
| | #ccc | rgb(80% 80% 80%) | hwb(none 80% 20%) | oklab(84.5% 0 0) | oklch(84.5% 0 none) | color(display-p3 0.8 0.8 0.8) | |
| | #bfbfbf | rgb(74.9% 74.9% 74.9%) | hwb(none 75% 25%) | oklab(80.5% 0 0) | oklch(80.5% 0 none) | color(display-p3 0.749 0.749 0.749) |
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
#FFFFFF
Fail - 1
Lc 0
#F5F5F5
Fail - 1.09
Lc 0
#EEEEEE
Fail - 1.16
Lc -9
#E0E0E0
Fail - 1.32
Lc -18
#D5D5D5
Fail - 1.46
Lc -25
#CCCCCC
Fail - 1.6
Lc -31
#BFBFBF
Fail - 1.83
Lc -39
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.