Studio Bone & Gray color palette

Color codes click any value to copy

Why it works and how to use it

It works because the lightness range is wide (24% to 93%), which gives clear hierarchy between background, content and accents. Try it for websites, presentations and branding.

• Background: Frost (#EEEEEE) is the lightest color, so it belongs on large surfaces.
• Text: Iron (#3F3D3C) on #EEEEEE gives 9.31:1, passing WCAG AAA.
• Primary: Bone (#E6D5C6) is the most saturated mid-tone; use it for buttons and links with a border or a darker shade for contrast.
• Accent: Gray (#817975) for highlights, badges and hover states.

2 of 6 color pairs pass WCAG AA (4.5:1); the strongest is Iron on Frost at 9.31:1.

Preview on a real UI see how the palette feels in context

Color blindness simulation

Color-blind check: all four colors stay distinguishable under protanopia, deuteranopia and tritanopia.

Contrast check WCAG ratios between palette colors