#222F3D
#1984e1
#ff8800
#b4e0fe
#ffffff
Color Palette
Self
by Colorffy Team
About
Blue
Orange
Black
White
Main Actions
#222F3D
#1984e1
#ff8800
#b4e0fe
#ffffff
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 |
|---|---|---|---|---|---|---|---|
| | #222f3d | rgb(13.3% 18.4% 23.9%) | hwb(210 13% 76%) | oklab(30% -0.01 -0.029) | oklch(30% 0.031 251) | color(display-p3 0.144 0.183 0.234) | |
| | #1984e1 | rgb(9.8% 51.8% 88.2%) | hwb(210 9.8% 12%) | oklab(60.6% -0.054 -0.158) | oklch(60.6% 0.167 251) | color(display-p3 0.245 0.51 0.856) | |
| | #f80 | rgb(100% 53.3% 0%) | hwb(32 0% 0%) | oklab(74.4% 0.1 0.151) | oklch(74.4% 0.181 56.5) | color(display-p3 0.939 0.558 0.206) | |
| | #b4e0fe | rgb(70.6% 87.8% 99.6%) | hwb(200 71% 0.39%) | oklab(88.6% -0.033 -0.053) | oklch(88.6% 0.062 238) | color(display-p3 0.74 0.873 0.984) | |
| | #fff | rgb(100% 100% 100%) | hwb(none 100% 0%) | oklab(100% 0 0) | oklch(100% 0 none) | color(display-p3 1 1 1) |
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
#222F3D
AAA - 13.61
Lc -103
#1984e1
Fail - 3.86
Lc -71
#ff8800
Fail - 2.39
Lc -51
#b4e0fe
Fail - 1.39
Lc -22
#ffffff
Fail - 1
Lc 0
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.
PWA Prompt