Nearest named color · #674222
#674222
Nearest named color: Florida’s Alligator
#674222 (rgb(103 66 34), hsl(28 50% 27%), oklch(0.415 0.069 60)) is closest to the named color Florida’s Alligator. See tints, shades, harmonies, WCAG & APCA contrast, and CSS, Tailwind v4 & SCSS code.
#674222
oklch(0.415 0.069 60)
Color conversions
- HEX
- #674222
- RGB
- rgb(103 66 34)
- HSL
- hsl(28 50% 27%)
- HWB
- hwb(28 13% 60%)
- OKLCH
- oklch(0.415 0.069 60)
- OKLab
- oklab(0.415 0.035 0.06)
- CIE Lab
- lab(31.85 13.98 26.01)
- LCH
- lch(31.85 29.53 61.7)
- CMYK
- cmyk(0% 36% 67% 60%)
Tints · Shades · Tones
Tints
- 765337
- 84654C
- 937761
- A28976
- B19C8C
- C1AFA2
- D0C3B8
- E0D6D0
- EFEBE7
Shades
- 59381C
- 4B2F16
- 3D2511
- 301C0B
- 231407
- 170B03
- 0C0501
- 040100
- 000000
Tones
- 6A482C
- 6D4E36
- 6F553F
- 725B48
- 756152
- 77675B
- 796D64
- 7C746D
- 7E7A77
Color harmonies
Complementary +180°
- 674222
Florida’s Alligator
- 24506D
≈ Kinetic Blue
Analogous -30° +30°
- 674222
Florida’s Alligator
- 6C3C35
≈ Burnished Bark
- 5A4A19
≈ Bronze Olive
Triadic +120° +240°
- 674222
Florida’s Alligator
- 11584D
≈ Baltic Prince
- 51436C
≈ Izmir Purple
Split-complementary +150° +210°
- 674222
Florida’s Alligator
- 085660
≈ Baltic Trench
- 3D4971
≈ Egyptian Violet
Tetradic +90° +180° +270°
- 674222
Florida’s Alligator
- 2E5637
≈ Green Stain
- 24506D
≈ Kinetic Blue
- 613D5E
≈ Precious Jewels
Contrast & accessibility
Ag
AAAOn white
WCAG 8.82:1 · APCA Lc 90
Ag
FailOn black
WCAG 2.37:1 · APCA Lc 12
Best text color: #FFFFFF
WCAG 8.82:1 (AAA) · APCA Lc 90
Contrast pairs
Code snippets
CSS
:root {
--florida-s-alligator: #674222;
--florida-s-alligator-rgb: 103 66 34;
--florida-s-alligator-oklch: oklch(0.415 0.069 60);
}
.element {
color: var(--florida-s-alligator);
background-color: hsl(28 50% 27%);
border-color: oklch(0.415 0.069 60);
}Tailwind CSS v4
@theme {
--color-florida-s-alligator: #674222;
--color-florida-s-alligator-50: #fff1e2;
--color-florida-s-alligator-100: #fae3d1;
--color-florida-s-alligator-200: #ebceb7;
--color-florida-s-alligator-300: #d2b094;
--color-florida-s-alligator-400: #bd9575;
--color-florida-s-alligator-500: #a87b57;
--color-florida-s-alligator-600: #8e684a;
--color-florida-s-alligator-700: #72533b;
--color-florida-s-alligator-800: #553c2a;
--color-florida-s-alligator-900: #3b2a1c;
--color-florida-s-alligator-950: #25170d;
}SCSS
$florida-s-alligator: #674222;
$florida-s-alligator-rgb: 103, 66, 34;
$florida-s-alligator-light: mix(#fff, $florida-s-alligator, 20%);
$florida-s-alligator-dark: mix(#000, $florida-s-alligator, 20%);
.element {
color: $florida-s-alligator;
box-shadow: 0 0 0 2px rgba($florida-s-alligator, 0.35);
}