Benoemde kleur · #FF550E
Orange Clown Fish
Orange Clown Fish is #FF550E: rgb(255 85 14), hsl(18 100% 53%), oklch(0.676 0.217 38). Bekijk tinten, schaduwen, harmonieën, WCAG- en APCA-contrast en CSS-, Tailwind v4- en SCSS-code.
What does Red mean? → · Orange Clown Fish color name →
#FF550E
oklch(0.676 0.217 38)
Kleurconversies
- HEX
- #ff550e
- RGB
- rgb(255 85 14)
- HSL
- hsl(18 100% 53%)
- HWB
- hwb(18 5% 0%)
- OKLCH
- oklch(0.676 0.217 38)
- OKLab
- oklab(0.676 0.171 0.133)
- CIE Lab
- lab(60.59 63.81 68.99)
- LCH
- lch(60.59 93.97 47.2)
- CMYK
- cmyk(0% 67% 95% 0%)
Tinten · Schaduwen · Tonen
Tinten
- FF6B39
- FF7E54
- FF906B
- FFA181
- FFB196
- FFC1AB
- FFD1C0
- FFE0D5
- FFF0EA
Schaduwen
- DE490B
- BE3D07
- 9E3105
- 802603
- 631C02
- 481101
- 2E0800
- 160200
- 030000
Tonen
- F35D2A
- E8643A
- DC6A46
- D06F51
- C3735A
- B77763
- AA7A6B
- 9D7C72
- 8F7E79
Kleurharmonieën
Complementair +180°
- FF550E
Orange Clown Fish
- 00A8C9
≈ Gummy Dolphins
Analoog -30° +30°
- FF550E
Orange Clown Fish
- FD4A7D
≈ Sasquatch Socks
- D28300
≈ Copious Caramel
Triadisch +120° +240°
- FF550E
Orange Clown Fish
- 00B370
≈ Green Teal
- 8188FF
≈ Lavender Blue Shadow
Gesplitst complementair +150° +210°
- FF550E
Orange Clown Fish
- 00AEA5
≈ Cozumel
- 0A9CFF
≈ Blue Nebula
Tetradisch +90° +180° +270°
- FF550E
Orange Clown Fish
- 77AA00
≈ Green Envy
- 00A8C9
≈ Gummy Dolphins
- BC68FB
≈ Easter Purple
Contrast en toegankelijkheid
Ag
FailOp wit
WCAG 3.20:1 · APCA Lc 58
Ag
AAOp zwart
WCAG 6.55:1 · APCA Lc 44
Beste tekstkleur: #000000
WCAG 6.55:1 (AA) · APCA Lc 44
Contrast pairs
Codefragmenten
CSS
:root {
--orange-clown-fish: #ff550e;
--orange-clown-fish-rgb: 255 85 14;
--orange-clown-fish-oklch: oklch(0.676 0.217 38);
}
.element {
color: var(--orange-clown-fish);
background-color: hsl(18 100% 53%);
border-color: oklch(0.676 0.217 38);
}Tailwind CSS v4
@theme {
--color-orange-clown-fish: #ff550e;
--color-orange-clown-fish-50: #ffe1c7;
--color-orange-clown-fish-100: #ffd0b1;
--color-orange-clown-fish-200: #ffb38c;
--color-orange-clown-fish-300: #ff8c5b;
--color-orange-clown-fish-400: #ff632b;
--color-orange-clown-fish-500: #f32f00;
--color-orange-clown-fish-600: #cd2c00;
--color-orange-clown-fish-700: #a52300;
--color-orange-clown-fish-800: #7c1600;
--color-orange-clown-fish-900: #580f00;
--color-orange-clown-fish-950: #3b0000;
}SCSS
$orange-clown-fish: #ff550e;
$orange-clown-fish-rgb: 255, 85, 14;
$orange-clown-fish-light: mix(#fff, $orange-clown-fish, 20%);
$orange-clown-fish-dark: mix(#000, $orange-clown-fish, 20%);
.element {
color: $orange-clown-fish;
box-shadow: 0 0 0 2px rgba($orange-clown-fish, 0.35);
}