Skip to main content
♡ Saved 0
Log in

A little color. A new perspective.

Published Oct 26, 2026

Clipping Rests above the Recipe Tabs

Test in Color Lab

Five colors, endless possibilities. Select a color to copy its HEX.

An open recipe box inspires five colors for a personal cooking app: deep teal, faded red handwriting, a violet card, a charcoal clipping, and a yellow timer. The palette keeps saved recipes warm, orderly, and easy to scan.

The feeling

A nostalgic recipe-box palette with faded handwriting, layered cards, and one lively timer detail

Explore this palette ↓

The mood

Imagine opening a recipe box at the kitchen table. A curled clipping rests above pale violet cards, faded red handwriting marks the dividers, and a yellow timer waits beside the stack. Deep teal surrounds the small paper details and gives the scene a quiet evening depth.

Recipe Box Teal anchors the palette. Pencil Red recalls handwritten notes, Lavender Card brings a gentle paper-like layer, and Clipping Charcoal adds a firm secondary surface. Timer Yellow gives saved steps and active moments one bright point.

How to use it

Use Recipe Box Teal for the app shell and Pencil Red for navigation, headings, and body copy on that dark field. Build saved-recipe cards in Lavender Card, then use Recipe Box Teal inside them for recipe titles, ingredients, and instructions. Clipping Charcoal suits a clipped-note panel, while Timer Yellow can mark the active cooking step or timer control.

Start with 46% Recipe Box Teal, 36% Lavender Card, and 18% Clipping Charcoal across the main surfaces. Add Pencil Red as the reading color and keep Timer Yellow to focused controls and small status details. Pair every tab with a recipe category label, and number each cooking step so the sequence remains clear without color.

What to watch

Pencil Red passes AA for normal and large text on Recipe Box Teal at 7.01:1 and Clipping Charcoal at 4.57:1. It measures 1.14:1 on Lavender Card and 1.03:1 on Timer Yellow, failing AA for normal and large text on both. Use Recipe Box Teal as the original-color foreground instead: it measures 7.98:1 on Lavender Card and 7.20:1 on Timer Yellow.

Lavender Card and Timer Yellow meet at only 1.11:1, so outline a meaningful yellow control with Recipe Box Teal. Clipping Charcoal and Recipe Box Teal meet at 1.53:1; use a Lavender Card outline when those regions touch. Each outline contrasts above 3:1 with both adjoining colors. Other surface pairings already clear the 3:1 non-text target.

A considered balance

Make room for
the right colors.

Use Recipe Box Teal for 46% of the main surfaces, Lavender Card for 36%, and Clipping Charcoal for 18%. Set Pencil Red text on Recipe Box Teal or Clipping Charcoal. Invert card and timer text to the original Recipe Box Teal. Outline Timer Yellow controls on Lavender Card with Recipe Box Teal, and outline Clipping Charcoal regions on Recipe Box Teal with Lavender Card.

Start with a generous background, introduce your primary color, then use the highlight sparingly. The ratios are a guide for large surfaces, not a fixed recipe.

46 Base
36 Main
18 Point
Recipe Box Teal

Background & breathing room

Lavender Card

Cards, graphics & sections

Clipping Charcoal

Focal areas & key details

Background · Primary · Highlight. Use text and accent colors where their roles call for them.

Text on background
7.01:1 #D8C6C3 on #123F46 · AAA normal text
Text on primary
1.14:1 #D8C6C3 on #DED3E6 · Not suitable for text

Recommended text on primary

The original text has low contrast (1.14:1). This example uses Recipe Box Teal (#123F46) from the same palette instead of #D8C6C3 on #DED3E6, improving contrast to 7.98:1. This meets WCAG AA for normal text.

Text on highlight
4.57:1 #D8C6C3 on #585450 · AA normal text
Text on accent
1.03:1 #D8C6C3 on #F2C84B · Not suitable for text

Recommended text on accent

The original text has low contrast (1.03:1). This example uses Recipe Box Teal (#123F46) from the same palette instead of #D8C6C3 on #F2C84B, improving contrast to 7.20:1. This meets WCAG AA for normal text.

Contrast is calculated for these specific pairs. Large text means at least 24 px regular or about 18.7 px bold. Check every pairing in your final design.

IMAGINE THE POSSIBILITIES

One palette.
A world of possibilities.

See how these five colors come together in a website, a poster, a brand, and a presentation. Explore a different palette and watch the mood change.

ONDA STUDIO / WEB PREVIEW
Journal   Places   About

INDEPENDENT STUDIO · SEOUL

Design with
today’s color.

A little space for fresh ideas. A considered palette for whatever comes next.

Prepared design previews, recolored with this palette.

COLOR NOTE

Pencil Red fails AA for normal and large text on Lavender Card at 1.14:1 and Timer Yellow at 1.03:1; use Recipe Box Teal on those surfaces at 7.98:1 and 7.20:1. Lavender Card beside Timer Yellow is 1.11:1, and Clipping Charcoal beside Recipe Box Teal is 1.53:1, so meaningful touching components need the specified contrasting outlines.

From inspiration to creation

Your next idea,
in these colors.

Add a considered color direction to the design you already have in mind. Your layout and instructions stay yours.

  1. Write your design request.
  2. Choose a color guide and copy it.
  3. Paste it after your request.
  4. Review the result and check readability.

Try it in the design or AI tool you already use. 

[Color guide — coloring.today / clipping-rests-above-the-recipe-tabs]
Apply this palette to the design requested above. Preserve the requested layout, content, and interactions. If an explicit requirement conflicts with this color guide, identify the conflict instead of silently overriding it.

Text: Pencil Red #D8C6C3
Primary: Lavender Card #DED3E6
Highlight: Clipping Charcoal #585450
Accent: Timer Yellow #F2C84B
Background: Recipe Box Teal #123F46

Mood: A nostalgic recipe-box palette with faded handwriting, layered cards, and one lively timer detail
Suggested uses: Lifestyle apps
Application note: Use Recipe Box Teal for 46% of the main surfaces, Lavender Card for 36%, and Clipping Charcoal for 18%. Set Pencil Red text on Recipe Box Teal or Clipping Charcoal. Invert card and timer text to the original Recipe Box Teal. Outline Timer Yellow controls on Lavender Card with Recipe Box Teal, and outline Clipping Charcoal regions on Recipe Box Teal with Lavender Card.
Avoid: Pencil Red fails AA for normal and large text on Lavender Card at 1.14:1 and Timer Yellow at 1.03:1; use Recipe Box Teal on those surfaces at 7.98:1 and 7.20:1. Lavender Card beside Timer Yellow is 1.11:1, and Clipping Charcoal beside Recipe Box Teal is 1.53:1, so meaningful touching components need the specified contrasting outlines.
Use approximately 46% background, 36% primary, and 18% highlight across large surfaces. These ratios are a starting point, not a rigid rule. Use text and accent colors according to their roles.

Keep the original HEX values. Choose readable text/background pairings without silently changing the palette. Do not introduce unrelated colors.

[Color guide — coloring.today / clipping-rests-above-the-recipe-tabs]
Apply this palette to the design requested above. Preserve the requested layout, content, and interactions. If an explicit requirement conflicts with this color guide, identify the conflict instead of silently overriding it.

Text: Pencil Red #D8C6C3
Primary: Lavender Card #DED3E6
Highlight: Clipping Charcoal #585450
Accent: Timer Yellow #F2C84B
Background: Recipe Box Teal #123F46

Mood: A nostalgic recipe-box palette with faded handwriting, layered cards, and one lively timer detail
Suggested uses: Lifestyle apps
Application note: Use Recipe Box Teal for 46% of the main surfaces, Lavender Card for 36%, and Clipping Charcoal for 18%. Set Pencil Red text on Recipe Box Teal or Clipping Charcoal. Invert card and timer text to the original Recipe Box Teal. Outline Timer Yellow controls on Lavender Card with Recipe Box Teal, and outline Clipping Charcoal regions on Recipe Box Teal with Lavender Card.
Avoid: Pencil Red fails AA for normal and large text on Lavender Card at 1.14:1 and Timer Yellow at 1.03:1; use Recipe Box Teal on those surfaces at 7.98:1 and 7.20:1. Lavender Card beside Timer Yellow is 1.11:1, and Clipping Charcoal beside Recipe Box Teal is 1.53:1, so meaningful touching components need the specified contrasting outlines.
Use approximately 46% background, 36% primary, and 18% highlight across large surfaces. These ratios are a starting point, not a rigid rule. Use text and accent colors according to their roles.

Use these semantic tokens consistently. Keep the original HEX values.
:root {
  --color-text: #D8C6C3;
  --color-primary: #DED3E6;
  --color-highlight: #585450;
  --color-accent: #F2C84B;
  --color-background: #123F46;
}
Background is the canvas, text is readable copy, primary is a key surface, highlight draws attention, and accent adds small secondary details.

[Color guide — coloring.today / clipping-rests-above-the-recipe-tabs]
Apply this palette to the design requested above. Preserve the requested layout, content, and interactions. If an explicit requirement conflicts with this color guide, identify the conflict instead of silently overriding it.

Text: Pencil Red #D8C6C3
Primary: Lavender Card #DED3E6
Highlight: Clipping Charcoal #585450
Accent: Timer Yellow #F2C84B
Background: Recipe Box Teal #123F46

Mood: A nostalgic recipe-box palette with faded handwriting, layered cards, and one lively timer detail
Suggested uses: Lifestyle apps
Application note: Use Recipe Box Teal for 46% of the main surfaces, Lavender Card for 36%, and Clipping Charcoal for 18%. Set Pencil Red text on Recipe Box Teal or Clipping Charcoal. Invert card and timer text to the original Recipe Box Teal. Outline Timer Yellow controls on Lavender Card with Recipe Box Teal, and outline Clipping Charcoal regions on Recipe Box Teal with Lavender Card.
Avoid: Pencil Red fails AA for normal and large text on Lavender Card at 1.14:1 and Timer Yellow at 1.03:1; use Recipe Box Teal on those surfaces at 7.98:1 and 7.20:1. Lavender Card beside Timer Yellow is 1.11:1, and Clipping Charcoal beside Recipe Box Teal is 1.53:1, so meaningful touching components need the specified contrasting outlines.
Use approximately 46% background, 36% primary, and 18% highlight across large surfaces. These ratios are a starting point, not a rigid rule. Use text and accent colors according to their roles.

Text/background contrast: 7.01:1. This is one measured pair, not a guarantee for the whole palette. Check every actual text/background pairing against WCAG AA. Prefer readable combinations from the original colors, keep visible keyboard focus, and never communicate state through color alone. If no original pairing meets the requirement, propose a separately labeled derived color with its original HEX, proposed HEX, purpose and measured contrast. Never overwrite the source palette.

This guide preserves the original HEX values. Review the output before using it.

Bring it into your project

Five colors.
Ready to use.

Copy the same colors as semantic CSS variables. Every preview and prompt on this page uses this palette. 

:root {
  --color-text: #D8C6C3;
  --color-primary: #DED3E6;
  --color-highlight: #585450;
  --color-accent: #F2C84B;
  --color-background: #123F46;
}

A little more inspiration.

All palettes ↗

Copy your color guide

Your browser could not copy automatically. Select the text below and copy it.