Skip to main content
♡ Saved 0
Log in

A little color. A new perspective.

Published Jun 29, 2026

Signals after Midnight

Test in Color Lab

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

A dark SaaS palette with an almost-black workspace, icy text, precise cyan panels, electric lemon actions, and cool grey details. Built for product screenshots, team activity, and a focused trial path.

The feeling

A restrained midnight workspace with icy text and two precise signals for live activity and action

Explore this palette ↓

The mood

Imagine a shared workspace still active after midnight: a quiet graphite screen, a cyan status panel, and one lemon action glowing beside the latest team update. The palette feels focused and awake without turning the whole page into a field of neon.

Ice Type carries the message, Midnight Graphite holds the product, Live Cyan shapes the main signal, Trial Lemon marks the next action, and System Grey keeps secondary activity in view.

How to use it

Use Midnight Graphite for the landing-page canvas and Ice Type for headings, navigation, and supporting copy. Live Cyan can frame a product screenshot or active-status panel. Reserve Trial Lemon for the primary trial action, and use System Grey for timestamps, separators, and secondary interface frames.

Give the canvas about 68% of the composition, cyan product surfaces 22%, and lemon actions 10%. Keep the bright colors precise and local. Pair team status with a label or icon as well as color.

What to watch

Ice Type on Midnight Graphite reaches about 17.77:1. The same pale text fails on Live Cyan at about 1.95:1, Trial Lemon at 1.06:1, and System Grey at 3.81:1. Use Midnight Graphite for text or symbols on those surfaces instead: it measures about 9.11:1 on cyan, 16.84:1 on lemon, and 4.67:1 on grey.

Do not repeat cyan and lemon across every card or activity item. Let screenshots carry detail, keep the lemon action unique, and avoid using glow effects that soften the measured edges between text and background.

A considered balance

Make room for
the right colors.

Use Midnight Graphite as the landing canvas and Ice Type for readable copy. Apply Live Cyan to a screenshot or live-status panel, Trial Lemon to the single primary action, and System Grey to timestamps, frames, and separators. Use graphite text on all three colored surfaces.

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.

68 Base
22 Main
10 Point
Midnight Graphite

Background & breathing room

Live Cyan

Cards, graphics & sections

Trial Lemon

Buttons & key signals

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

Text on background
17.77:1 #F2FAFF on #101215 · AAA normal text
Text on primary
1.95:1 #F2FAFF on #18C7D8 · Not suitable for text

Recommended text on primary

The original text has low contrast (1.95:1). This example uses Midnight Graphite (#101215) from the same palette instead of #F2FAFF on #18C7D8, improving contrast to 9.11:1. This meets WCAG AA for normal text.

Text on highlight
1.06:1 #F2FAFF on #E9FF45 · Not suitable for text

Recommended text on highlight

The original text has low contrast (1.06:1). This example uses Midnight Graphite (#101215) from the same palette instead of #F2FAFF on #E9FF45, improving contrast to 16.84:1. This meets WCAG AA for normal text.

Text on accent
3.81:1 #F2FAFF on #75808C · AA large text only

Recommended text on accent

The original text has low contrast (3.81:1). This example uses Midnight Graphite (#101215) from the same palette instead of #F2FAFF on #75808C, improving contrast to 4.67: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

Do not place Ice Type on Live Cyan (about 1.95:1), Trial Lemon (about 1.06:1), or System Grey (about 3.81:1). Use Midnight Graphite on those surfaces, and keep cyan and lemon scarce enough to preserve hierarchy.

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 / signals-after-midnight]
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: Ice Type #F2FAFF
Primary: Live Cyan #18C7D8
Highlight: Trial Lemon #E9FF45
Accent: System Grey #75808C
Background: Midnight Graphite #101215

Mood: A restrained midnight workspace with icy text and two precise signals for live activity and action
Suggested uses: SaaS landing pages
Application note: Use Midnight Graphite as the landing canvas and Ice Type for readable copy. Apply Live Cyan to a screenshot or live-status panel, Trial Lemon to the single primary action, and System Grey to timestamps, frames, and separators. Use graphite text on all three colored surfaces.
Avoid: Do not place Ice Type on Live Cyan (about 1.95:1), Trial Lemon (about 1.06:1), or System Grey (about 3.81:1). Use Midnight Graphite on those surfaces, and keep cyan and lemon scarce enough to preserve hierarchy.
Use approximately 68% background, 22% primary, and 10% 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 / signals-after-midnight]
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: Ice Type #F2FAFF
Primary: Live Cyan #18C7D8
Highlight: Trial Lemon #E9FF45
Accent: System Grey #75808C
Background: Midnight Graphite #101215

Mood: A restrained midnight workspace with icy text and two precise signals for live activity and action
Suggested uses: SaaS landing pages
Application note: Use Midnight Graphite as the landing canvas and Ice Type for readable copy. Apply Live Cyan to a screenshot or live-status panel, Trial Lemon to the single primary action, and System Grey to timestamps, frames, and separators. Use graphite text on all three colored surfaces.
Avoid: Do not place Ice Type on Live Cyan (about 1.95:1), Trial Lemon (about 1.06:1), or System Grey (about 3.81:1). Use Midnight Graphite on those surfaces, and keep cyan and lemon scarce enough to preserve hierarchy.
Use approximately 68% background, 22% primary, and 10% 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: #F2FAFF;
  --color-primary: #18C7D8;
  --color-highlight: #E9FF45;
  --color-accent: #75808C;
  --color-background: #101215;
}
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 / signals-after-midnight]
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: Ice Type #F2FAFF
Primary: Live Cyan #18C7D8
Highlight: Trial Lemon #E9FF45
Accent: System Grey #75808C
Background: Midnight Graphite #101215

Mood: A restrained midnight workspace with icy text and two precise signals for live activity and action
Suggested uses: SaaS landing pages
Application note: Use Midnight Graphite as the landing canvas and Ice Type for readable copy. Apply Live Cyan to a screenshot or live-status panel, Trial Lemon to the single primary action, and System Grey to timestamps, frames, and separators. Use graphite text on all three colored surfaces.
Avoid: Do not place Ice Type on Live Cyan (about 1.95:1), Trial Lemon (about 1.06:1), or System Grey (about 3.81:1). Use Midnight Graphite on those surfaces, and keep cyan and lemon scarce enough to preserve hierarchy.
Use approximately 68% background, 22% primary, and 10% 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: 17.77: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: #F2FAFF;
  --color-primary: #18C7D8;
  --color-highlight: #E9FF45;
  --color-accent: #75808C;
  --color-background: #101215;
}

A little more inspiration.

All palettes ↗

Copy your color guide

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