Azure (CSS) Triadic Color Scheme
Five colors arranged by the triadic rule around Azure (CSS) (#F0FFFF), each snapped to its nearest named color.
#F0FFFF
#FFEBFE
#FFFFE5
#E7FEFF
#FFAAFF
Color names and codes
| Name | HEX | RGB | HSL | CMYK | OKLCH | |
|---|---|---|---|---|---|---|
| Azure (CSS) | #F0FFFF | 240, 255, 255 | 180°, 100%, 97% | 6, 0, 0, 0 | 98.9% 0.016 197 | |
| Fairy Bubblegum Cloud | #FFEBFE | 255, 235, 254 | 303°, 100%, 96% | 0, 8, 0, 0 | 96.1% 0.033 327 | |
| La Luna | #FFFFE5 | 255, 255, 229 | 60°, 100%, 95% | 0, 0, 10, 0 | 99.3% 0.034 107 | |
| Bubbles | #E7FEFF | 231, 254, 255 | 183°, 100%, 95% | 9, 0, 0, 0 | 98.1% 0.024 200 | |
| Jigglypuff | #FFAAFF | 255, 170, 255 | 300°, 100%, 83% | 0, 33, 0, 0 | 84.8% 0.146 327 |
Which pairs work for text
| Text on background | Contrast | WCAG |
|---|---|---|
| Aa #FFFFE5 on #FFAAFF | 1.66:1 | — |
| Aa #F0FFFF on #FFAAFF | 1.64:1 | — |
| Aa #E7FEFF on #FFAAFF | 1.61:1 | — |
| Aa #FFEBFE on #FFAAFF | 1.49:1 | — |
| Aa #FFEBFE on #FFFFE5 | 1.11:1 | — |
| Aa #F0FFFF on #FFEBFE | 1.10:1 | — |
CSS variables
:root {
--color-1: #f0ffff; /* Azure (CSS) */
--color-2: #ffebfe; /* Fairy Bubblegum Cloud */
--color-3: #ffffe5; /* La Luna */
--color-4: #e7feff; /* Bubbles */
--color-5: #ffaaff; /* Jigglypuff */
}Other schemes from Azure (CSS)
- Azure (CSS) Complementary Color Scheme#F0FFFF#E7FEFF#FFE6E4#FEA5A2#FFE6E4
- Azure (CSS) Analogous Color Scheme#E7FBEC#E6FDF1#F0FFFF#E8F5FC#E6E6FA
- Azure (CSS) Split-complementary Color Scheme#F0FFFF#FFE6F1#FFF2E4#AAFFFF#FFE6F1
- Azure (CSS) Tetradic Color Scheme#F0FFFF#F0EBFC#FFE6E4#F6FFE8#E7FEFF
- Azure (CSS) Monochromatic Color Scheme#56FFFF#AAFFFF#F0FFFF#E7FEFF#E7FEFF
More white triadic color schemes
- Anti-Flash White Triadic Color Scheme#F2F3F4#F5F0F1#F4F4F0#EEF2F3#DAC0CD
- Beluga Triadic Color Scheme#EFF2F1#F3F1F3#F3F2ED#F0F4F2#CFBBD8
- Brilliance Triadic Color Scheme#FDFDFD#EFF5F1#EBF1F5#F4EFEE#CCE2CA
- Ceramic Triadic Color Scheme#FCFFF9#E8F5FC#FFE6F1#F6FFE8#A7D7FF
- Chef’s Hat Triadic Color Scheme#F3F4F5#F5F0F1#F4F4F0#EEF2F3#DAC0CD
- Cloud Break Triadic Color Scheme#F6F1FE#FCF0E5#E6FDF1#F0EBFC#FBCAAD
- Cotton Ball Triadic Color Scheme#F2F7FD#FFEBF2#F1FDE9#E7EFFB#F4AFCD
- Doctor Triadic Color Scheme#F9F9F9#EFF5F1#EBF1F5#F4EFEE#C6DCC7
- Dr. White Triadic Color Scheme#FAFAFA#EFF5F1#EBF1F5#F4EFEE#CBDCCB
- Emptiness Triadic Color Scheme#FCFDFC#EBF1F5#F4EFEE#EFF5F1#CECAE1
- Errigal White Triadic Color Scheme#F2F2F4#F4EFEE#EFF5F1#EBF1F5#DCC0C3
- Everlasting Ice Triadic Color Scheme#F6FDFA#F3E9F7#FBF4E8#E9F9F5#D8B8F8
Questions
What colors go with Azure (CSS)?
In a triadic scheme: Fairy Bubblegum Cloud (#FFEBFE), La Luna (#FFFFE5), Bubbles (#E7FEFF), Jigglypuff (#FFAAFF).
What is the hex code of Azure (CSS)?
#F0FFFF.