Tropical Fish color palette
Clownfish orange #FF6600, mango and a sunny yellow, #FFCC00, swim against reef cyan #00CCFF and a deep electric blue, #0033FF. The warm and cool halves are close to exact opposites, which makes each side look brighter. Saturation is maxed out, so this is a loud, happy palette. Aquariums and water parks are the first places to try it.
Tropical Fish palette in use
Use white as the base and #0033FF for text and headings. #FF6600 is the button color, #FFCC00 suits badges and banners, and #00CCFF and #FF9900 fill illustrations.
This pair measures 4.76:1, so it works for body text too. The button uses #FF6600 with black text.
ButtonGood for
- Aquarium gift shop
- Toy brand packaging
- Water park website
- Summer promo banner
Readable color pairs
Pairs from this palette with at least 3:1 contrast (WCAG 2). Use AA and AAA pairs for body text, and AA large pairs for headings 24px and up.
| Text | Background | Ratio | Rating |
|---|---|---|---|
#0033FF | #FFCC00 | 4.76:1 | AA |
#0033FF | #00CCFF | 3.79:1 | AA large |
#0033FF | #FF9900 | 3.36:1 | AA large |
Tropical Fish palette as code
CSS variables
:root {
--tropical-fish-1: #FF6600;
--tropical-fish-2: #FF9900;
--tropical-fish-3: #FFCC00;
--tropical-fish-4: #00CCFF;
--tropical-fish-5: #0033FF;
}Tailwind v4
@theme {
--color-tropical-fish-1: #FF6600;
--color-tropical-fish-2: #FF9900;
--color-tropical-fish-3: #FFCC00;
--color-tropical-fish-4: #00CCFF;
--color-tropical-fish-5: #0033FF;
}Tailwind v3
// tailwind.config.js → theme.extend.colors
'tropical-fish': {
100: '#FF6600',
200: '#FF9900',
300: '#FFCC00',
400: '#00CCFF',
500: '#0033FF',
},SCSS
$tropical-fish-1: #FF6600;
$tropical-fish-2: #FF9900;
$tropical-fish-3: #FFCC00;
$tropical-fish-4: #00CCFF;
$tropical-fish-5: #0033FF;JSON
["#FF6600","#FF9900","#FFCC00","#00CCFF","#0033FF"]Named colors in this palette
The nearest named color to each swatch, with its meaning and matching colors.