Canary Complementary Color Scheme

Five colors arranged by the complementary rule around Canary (#FDFF63), each snapped to its nearest named color.

#FDFF63

#FFFFBF

#6666FF

#1C1CF0

#CCCCFF

Color names and codes

Name	HEX	RGB	HSL	CMYK
Canary	`#FDFF63`	253, 255, 99	61°, 100%, 69%	1, 0, 61, 0
Sour Veil	`#FFFFBF`	255, 255, 191	60°, 100%, 87%	0, 0, 25, 0
Blue Genie	`#6666FF`	102, 102, 255	240°, 100%, 70%	60, 60, 0, 0
Bluebonnet	`#1C1CF0`	28, 28, 240	240°, 88%, 53%	88, 88, 0, 6
Lavender Blue	`#CCCCFF`	204, 204, 255	240°, 100%, 90%	20, 20, 0, 0

Which pairs work for text

Text on background	Contrast	WCAG
Aa #FFFFBF on #1C1CF0	8.21:1	AAA
Aa #FDFF63 on #1C1CF0	7.95:1	AAA
Aa #1C1CF0 on #CCCCFF	5.52:1	AA
Aa #FFFFBF on #6666FF	4.14:1	AA large
Aa #FDFF63 on #6666FF	4.00:1	AA large
Aa #6666FF on #CCCCFF	2.78:1	—

CSS variables

:root {
  --color-1: #fdff63; /* Canary */
  --color-2: #ffffbf; /* Sour Veil */
  --color-3: #6666ff; /* Blue Genie */
  --color-4: #1c1cf0; /* Bluebonnet */
  --color-5: #ccccff; /* Lavender Blue */
}

Other schemes from Canary

More Light Yellow complementary palettes

Questions

What colors go with Canary?

In a complementary scheme: Sour Veil (#FFFFBF), Blue Genie (#6666FF), Bluebonnet (#1C1CF0), Lavender Blue (#CCCCFF).

What is the hex code of Canary?

#FDFF63.