Cor nomeada · #2200FF
Blue Pencil
Blue Pencil é #2200FF: rgb(34 0 255), hsl(248 100% 50%), oklch(0.459 0.308 267.4). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Blue mean? → · Blue Pencil color name →
#2200FF
oklch(0.459 0.308 267.4)
Conversões de cor
- HEX
- #2200ff
- RGB
- rgb(34 0 255)
- HSL
- hsl(248 100% 50%)
- HWB
- hwb(248 0% 0%)
- OKLCH
- oklch(0.459 0.308 267.4)
- OKLab
- oklab(0.459 -0.014 -0.308)
- CIE Lab
- lab(30.44 68.75 -110.54)
- LCH
- lch(30.44 130.18 301.9)
- CMYK
- cmyk(87% 100% 0% 0%)
Tons claros · Sombras · Tons
Tons claros
- 2941FF
- 395FFF
- 4E78FF
- 658EFF
- 7DA2FF
- 96B6FF
- AFC8FF
- C9DBFF
- E4EDFF
Sombras
- 1C00DE
- 1600BE
- 11009E
- 0B0080
- 070063
- 030048
- 01002E
- 000016
- 000003
Tons
- 222FF3
- 2742E8
- 2F50DC
- 395BD0
- 4464C4
- 506BB7
- 5C72AA
- 68779D
- 747C8F
Harmonias de cor
Complementar +180°
- 2200FF
Blue Pencil
- 6E5400
≈ Ayahuasca Vine
Análoga -30° +30°
- 2200FF
Blue Pencil
- 005F89
≈ Blue Flame
- 6E00CC
≈ Trusted Purple
Tríade +120° +240°
- 2200FF
Blue Pencil
- A8000D
≈ Real Red
- 006B25
≈ Avagddu Green
Complementar dividida +150° +210°
- 2200FF
Blue Pencil
- 844500
≈ Chocolate Pancakes
- 545F00
≈ Greensboro
Tétrade +90° +180° +270°
- 2200FF
Blue Pencil
- A00058
≈ Deep Magenta
- 6E5400
≈ Ayahuasca Vine
- 006757
≈ Piney Lake
Contraste e acessibilidade
Ag
AAASobre branco
WCAG 8.35:1 · APCA Lc 85
Ag
FailSobre preto
WCAG 2.51:1 · APCA Lc 17
Melhor cor de texto: #FFFFFF
WCAG 8.35:1 (AAA) · APCA Lc 85
Contrast pairs
Trechos de código
CSS
:root {
--blue-pencil: #2200ff;
--blue-pencil-rgb: 34 0 255;
--blue-pencil-oklch: oklch(0.459 0.308 267.4);
}
.element {
color: var(--blue-pencil);
background-color: hsl(248 100% 50%);
border-color: oklch(0.459 0.308 267.4);
}Tailwind CSS v4
@theme {
--color-blue-pencil: #2200ff;
--color-blue-pencil-50: #d2f1ff;
--color-blue-pencil-100: #bfe2ff;
--color-blue-pencil-200: #a0caff;
--color-blue-pencil-300: #7ba6ff;
--color-blue-pencil-400: #5183ff;
--color-blue-pencil-500: #3754ff;
--color-blue-pencil-600: #2e4aff;
--color-blue-pencil-700: #243ce2;
--color-blue-pencil-800: #0e2caa;
--color-blue-pencil-900: #081e79;
--color-blue-pencil-950: #020a56;
}SCSS
$blue-pencil: #2200ff;
$blue-pencil-rgb: 34, 0, 255;
$blue-pencil-light: mix(#fff, $blue-pencil, 20%);
$blue-pencil-dark: mix(#000, $blue-pencil, 20%);
.element {
color: $blue-pencil;
box-shadow: 0 0 0 2px rgba($blue-pencil, 0.35);
}