Playground
A spirited burst of primary-inspired tones that radiates pure optimism.
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 |
|---|---|---|---|---|---|---|---|
| | #ff6b6b | rgb(100% 42% 42%) | hwb(0 42% 0%) | oklab(71.2% 0.167 0.07) | oklch(71.2% 0.181 22.8) | color(display-p3 0.93 0.456 0.439) | |
| | #ffd93d | rgb(100% 85.1% 23.9%) | hwb(48 24% 0%) | oklab(89.3% -0.013 0.166) | oklch(89.3% 0.167 94.5) | color(display-p3 0.976 0.856 0.365) | |
| | #6bcb77 | rgb(42% 79.6% 46.7%) | hwb(130 42% 20%) | oklab(76.3% -0.125 0.082) | oklch(76.3% 0.15 147) | color(display-p3 0.514 0.787 0.5) | |
| | #4d96ff | rgb(30.2% 58.8% 100%) | hwb(220 30% 0%) | oklab(67.7% -0.036 -0.168) | oklch(67.7% 0.172 258) | color(display-p3 0.374 0.581 0.97) | |
| | #f0f0f0 | rgb(94.1% 94.1% 94.1%) | hwb(none 94% 5.9%) | oklab(95.5% 0 0) | oklch(95.5% 0 none) | color(display-p3 0.941 0.941 0.941) |
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
#ff6b6b
Fail - 2.77
Lc -58
#ffd93d
Fail - 1.37
Lc -21
#6bcb77
Fail - 2.01
Lc -43
#4d96ff
Fail - 2.94
Lc -61
#f0f0f0
Fail - 1.13
Lc -8
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.