SBF • Color Picker • Contrast Analyzer • Optimizer
Foreground Color
ℹ️
- #0080ff
- rgb(0, 128, 255)
- hsl(209.89 100% 50%)
- color(display-p3 0.2161 0.4942 0.9668)
- lch(53.54 73.07 276.81)
- lab(53.54 8.66 -72.55)
- oklab(0.62 -0.05 -0.2)
- Linear RGB vec(0.00003, 0.21591, 1.00002, 1)
- 0.62, 0.21, 256.1
- Figma P3 #377ef7ff
sRGB fallback color
Color is within sRGB gamut
Background Color
ℹ️
- #0080ff
- rgb(0, 128, 255)
- hsl(209.89 100% 50%)
- color(display-p3 0.2161 0.4942 0.9668)
- lch(53.54 73.07 276.81)
- lab(53.54 8.66 -72.55)
- oklab(0.62 -0.05 -0.2)
- Linear RGB vec(0.00003, 0.21591, 1.00002, 1)
- 0.62, 0.21, 256.1
- Figma P3 #377ef7ff
sRGB fallback color
Color is within sRGB gamut
Contrast
Good
Analysis – WCAG 2 AAA
- Good – ratio ≥ 7.0:1
- Okay – ratio ≥ 4.5:1
- Poor – ratio < 4.5:1
Analysis – WCAG 2 AA
- Good – ratio ≥ 4.5:1
- Okay – ratio ≥ 3.0:1
- Poor – ratio < 3.0:1
Analysis – APCA
- Preferred – Lc ≥ 90
- Good – Lc ≥ 75
- Okay – Lc ≥ 60
- Poor – Lc ≥ 45
- Avoid – Lc < 45
Contrast Ratio:
7.0:1
Fallback Contrast:
9.3:1
WCAG 2 AAA (≥ 7.0:1)
YES
WCAG 2 AAA (18pt+) (≥ 4.5:1)
YES
WCAG 2 AA (≥ 4.5:1)
YES
WCAG 2 AA (18pt+) (≥ 3.0:1)
YES
Lightness Contrast:
85
APCA Lc ≥ 90
YES
APCA Lc ≥ 75
YES
APCA Lc ≥ 60
YES
APCA Lc ≥ 45
YES
Color space setting
sRGB
Drag & Drop
#f01923
#ffb9e1
#ffff00
#ebc55f
#00ffe1
#7dff7d
#f5f6f7
#e9ecef
#26292c
#323537
Color Scheme
#0024a7
#a70078
#a78300
#00a72f
