Gradient
Bloom
by Colorffy Team
About
Pink
fashion
spring
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 |
|---|---|---|---|---|---|---|---|
| | #f7e8f3 | rgb(96.9% 91% 95.3%) | hwb(320 91% 3.1%) | oklab(94.6% 0.02 -0.009) | oklch(94.6% 0.022 335) | color(display-p3 0.959 0.912 0.95) | |
| | #f2d1eb | rgb(94.9% 82% 92.2%) | hwb(310 82% 5.1%) | oklab(89.6% 0.045 -0.023) | oklch(89.6% 0.05 333) | color(display-p3 0.928 0.824 0.915) | |
| | #ebbbdd | rgb(92.2% 73.3% 86.7%) | hwb(320 73% 7.8%) | oklab(84.5% 0.065 -0.028) | oklch(84.5% 0.071 337) | color(display-p3 0.892 0.741 0.859) | |
| | #e3a5d0 | rgb(89% 64.7% 81.6%) | hwb(320 65% 11%) | oklab(79.3% 0.085 -0.034) | oklch(79.3% 0.092 338) | color(display-p3 0.854 0.657 0.806) | |
| | #db8fc2 | rgb(85.9% 56.1% 76.1%) | hwb(320 56% 14%) | oklab(74.2% 0.106 -0.039) | oklch(74.2% 0.112 340) | color(display-p3 0.816 0.574 0.75) |
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
#F7E8F3
Fail - 1.18
Lc -10
#F2D1EB
Fail - 1.39
Lc -22
#EBBBDD
Fail - 1.65
Lc -33
#E3A5D0
Fail - 1.98
Lc -43
#DB8FC2
Fail - 2.4
Lc -52
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