Khaki vs Yellow

What is the difference between Khaki and Yellow?

Examining Khaki (#F0E68C) relative to Yellow (#FFFF00) showcases key differences in design application. In terms of color intensity, Yellow features a more vivid and saturated tone. Under screen illumination, Khaki has a higher brightness and reflectivity. They have a close hue coordinate distance of 6°, representing a harmonized adjacent relationship.

Design recommendations for Khaki vs Yellow

When choosing between Khaki and Yellow for interface designs, consider their visual weight. Since Yellow is darker, it serves as a solid base for structural layouts or heavy typography, while the lighter Khaki is ideal for backgrounds or high-visibility accents. Testing their contrast ratio is essential to meet WCAG accessibility guidelines.

Readability & Contrast Testing

Visual test showing black and white text overlay readability on both colors.

Khaki Typography

Preview of dark and light text elements rendered over a solid Khaki background canvas.

White Text: 1.28:1 Black Text: 16.40:1

Yellow Typography

Preview of dark and light text elements rendered over a solid Yellow background canvas.

White Text: 1.07:1 Black Text: 19.56:1

Technical Specifications Comparison

Format / Value Khaki Yellow Delta / Difference
HEX Code #F0E68C #FFFF00 -
RGB Channels rgb(240, 230, 140) rgb(255, 255, 0) R:+15 | G:+25 | B:-140
HSL Values hsl(54°, 77%, 75%) hsl(60°, 100%, 50%) H:+6° | S:+23% | L:-25%
CMYK (Print) cmyk(0%, 4%, 42%, 6%) cmyk(0%, 0%, 100%, 0%) -

Individual Color References

Khaki Reference Sheet HEX, RGB, HSL and print codes
Yellow Reference Sheet HEX, RGB, HSL and print codes
Copied!