Cor nomeada · #227478
Poseidon’s Castle
Poseidon’s Castle é #227478: rgb(34 116 120), hsl(183 56% 30%), oklch(0.513 0.076 199.8). Veja tons claros, sombras, harmonias, contraste WCAG e APCA e código CSS, Tailwind v4 e SCSS.
What does Teal mean? → · Poseidon’s Castle color name →
#227478
oklch(0.513 0.076 199.8)
Conversões de cor
- HEX
- #227478
- RGB
- rgb(34 116 120)
- HSL
- hsl(183 56% 30%)
- HWB
- hwb(183 13% 53%)
- OKLCH
- oklch(0.513 0.076 199.8)
- OKLab
- oklab(0.513 -0.072 -0.026)
- CIE Lab
- lab(44.25 -23.94 -9.74)
- LCH
- lch(44.25 25.84 202.1)
- CMYK
- cmyk(72% 3% 0% 53%)
Tons claros · Sombras · Tons
Tons claros
- 3E8185
- 558F92
- 6A9C9F
- 80AAAC
- 95B8B9
- AAC6C7
- BFD4D5
- D4E2E3
- E9F0F1
Sombras
- 1C6467
- 165457
- 114548
- 0B3739
- 07292A
- 031B1D
- 010F10
- 000505
- 000101
Tons
- 317579
- 3D777A
- 47787B
- 50797B
- 597B7C
- 617C7D
- 697D7E
- 717E7E
- 797F7F
Harmonias de cor
Complementar +180°
- 227478
Poseidon’s Castle
- 8E5555
≈ Maroon Rover
Análoga -30° +30°
- 227478
Poseidon’s Castle
- 337560
≈ Nordic Forest
- 326F8A
≈ Astral
Tríade +120° +240°
- 227478
Poseidon’s Castle
- 7A5882
≈ Champion
- 7E6230
≈ Bronze Brown
Complementar dividida +150° +210°
- 227478
Poseidon’s Castle
- 88546D
≈ Merlin’s Cloak
- 8A5A3E
≈ Brushwood
Tétrade +90° +180° +270°
- 227478
Poseidon’s Castle
- 665F90
≈ Corsican Blue
- 8E5555
≈ Maroon Rover
- 6A6B34
≈ Safari Green
Contraste e acessibilidade
Ag
AASobre branco
WCAG 5.47:1 · APCA Lc 77
Ag
FailSobre preto
WCAG 3.83:1 · APCA Lc 25
Melhor cor de texto: #FFFFFF
WCAG 5.47:1 (AA) · APCA Lc 77
Contrast pairs
Trechos de código
CSS
:root {
--poseidon-s-castle: #227478;
--poseidon-s-castle-rgb: 34 116 120;
--poseidon-s-castle-oklch: oklch(0.513 0.076 199.8);
}
.element {
color: var(--poseidon-s-castle);
background-color: hsl(183 56% 30%);
border-color: oklch(0.513 0.076 199.8);
}Tailwind CSS v4
@theme {
--color-poseidon-s-castle: #227478;
--color-poseidon-s-castle-50: #ddfcfe;
--color-poseidon-s-castle-100: #cbf0f3;
--color-poseidon-s-castle-200: #afdfe2;
--color-poseidon-s-castle-300: #88c4c8;
--color-poseidon-s-castle-400: #64acb0;
--color-poseidon-s-castle-500: #3d959a;
--color-poseidon-s-castle-600: #357e82;
--color-poseidon-s-castle-700: #2a6568;
--color-poseidon-s-castle-800: #1d4a4c;
--color-poseidon-s-castle-900: #133435;
--color-poseidon-s-castle-950: #041f20;
}SCSS
$poseidon-s-castle: #227478;
$poseidon-s-castle-rgb: 34, 116, 120;
$poseidon-s-castle-light: mix(#fff, $poseidon-s-castle, 20%);
$poseidon-s-castle-dark: mix(#000, $poseidon-s-castle, 20%);
.element {
color: $poseidon-s-castle;
box-shadow: 0 0 0 2px rgba($poseidon-s-castle, 0.35);
}