Nazwany kolor · #003333
Nora’s Forest
Nora’s Forest to #003333: rgb(0 51 51), hsl(180 100% 10%), oklch(0.291 0.05 194.8). Zobacz odcienie jaśniejsze i ciemniejsze, harmonie, kontrast WCAG i APCA oraz kod CSS, Tailwind v4 i SCSS.
What does Teal mean? → · Nora’s Forest color name →
#003333
oklch(0.291 0.05 194.8)
Konwersje koloru
- HEX
- #003333
- RGB
- rgb(0 51 51)
- HSL
- hsl(180 100% 10%)
- HWB
- hwb(180 0% 80%)
- OKLCH
- oklch(0.291 0.05 194.8)
- OKLab
- oklab(0.291 -0.048 -0.013)
- CIE Lab
- lab(18.25 -16.27 -4.8)
- LCH
- lch(18.25 16.96 196.5)
- CMYK
- cmyk(100% 0% 0% 80%)
Odcienie jaśniejsze · Odcienie ciemniejsze · Tony
Odcienie jaśniejsze
- 1D4545
- 355857
- 4D6B6A
- 657F7E
- 7D9392
- 96A8A7
- AFBDBC
- C9D2D2
- E4E9E8
Odcienie ciemniejsze
- 002B2B
- 002323
- 001C1C
- 001414
- 000D0D
- 000707
- 000303
- 000101
- 000000
Tony
- 123A3A
- 204241
- 2C4949
- 385150
- 445958
- 506060
- 5C6868
- 687070
- 747878
Harmonie kolorów
Komplementarna +180°
- 003333
Nora’s Forest
- 412124
≈ Temptress
Analogowa -30° +30°
- 003333
Nora’s Forest
- 0E3325
≈ Opulent Green
- 07303E
≈ Nordic Noir
Triada +120° +240°
- 003333
Nora’s Forest
- 35243D
≈ Kokimurasaki Purple
- 3A280C
≈ Brown Tumbleweed
Komplementarna rozszczepiona +150° +210°
- 003333
Nora’s Forest
- 3D2131
≈ Sitter Red
- 402316
≈ Délicieux au Chocolat
Tetrada +90° +180° +270°
- 003333
Nora’s Forest
- 292843
≈ Telopea
- 412124
≈ Temptress
- 2F2D0C
≈ Secret Passage
Kontrast i dostępność
Ag
AAANa bieli
WCAG 13.80:1 · APCA Lc 100
Ag
FailNa czerni
WCAG 1.52:1 · APCA Lc 0
Najlepszy kolor tekstu: #FFFFFF
WCAG 13.80:1 (AAA) · APCA Lc 100
Contrast pairs
Fragmenty kodu
CSS
:root {
--nora-s-forest: #003333;
--nora-s-forest-rgb: 0 51 51;
--nora-s-forest-oklch: oklch(0.291 0.05 194.8);
}
.element {
color: var(--nora-s-forest);
background-color: hsl(180 100% 10%);
border-color: oklch(0.291 0.05 194.8);
}Tailwind CSS v4
@theme {
--color-nora-s-forest: #003333;
--color-nora-s-forest-50: #e6fafa;
--color-nora-s-forest-100: #d6eded;
--color-nora-s-forest-200: #bddbdb;
--color-nora-s-forest-300: #9bc0c0;
--color-nora-s-forest-400: #7ca8a7;
--color-nora-s-forest-500: #5e9190;
--color-nora-s-forest-600: #507a7a;
--color-nora-s-forest-700: #406262;
--color-nora-s-forest-800: #2e4847;
--color-nora-s-forest-900: #1f3231;
--color-nora-s-forest-950: #0e1e1d;
}SCSS
$nora-s-forest: #003333;
$nora-s-forest-rgb: 0, 51, 51;
$nora-s-forest-light: mix(#fff, $nora-s-forest, 20%);
$nora-s-forest-dark: mix(#000, $nora-s-forest, 20%);
.element {
color: $nora-s-forest;
box-shadow: 0 0 0 2px rgba($nora-s-forest, 0.35);
}