Azure (#F0FFFF) Shades and Tints

Azure is the hex color #F0FFFF. The panel shows its 11 shades and tints, from 50 (lightest) to 950 (darkest), ready to copy as CSS, Tailwind or SwiftUI. Below are its color codes, its contrast as text on white and on black, and the named colors closest to it.

Color codes

HEX: #F0FFFF
RGB: rgb(240, 255, 255)
HSL: hsl(180, 100%, 97%)

Contrast as text

On white1.02:1AA FailAAA Fail
On black20.45:1AA PassAAA Pass

WCAG 2 asks for at least 4.5:1 (AA) or 7:1 (AAA) for normal-size text.

Azure

100%

Color Range

100

200

300

400

500

600

700

800

900

950

  azure-50: #f8ffff;
  azure-100: #f0ffff;
  azure-200: #d5e2e2;
  azure-300: #bbc6c6;
  azure-400: #a1abab;
  azure-500: #889191;
  azure-600: #707777;
  azure-700: #595e5e;
  azure-800: #434747;
  azure-900: #2e3030;
  azure-950: #1a1b1b;

Insert Color Range

Instructions

Change the base color with the edit button in the panel on the right, and the 11 shades and the example components update. Copy the scale as CSS, CSS variables, Tailwind or SwiftUI.

Example Components

New Release

Premium Wireless Headphones

High-fidelity audio with active noise cancellation, premium materials, and up to 30 hours of battery life. Perfect for music enthusiasts and professionals.

(128)

$249.99$299.9917% off

The Future of Web Development: AI-Powered Tools and Automation

Technology

Alex Chen

Mar 15, 2025

The Future of Web Development: AI-Powered Tools and Automation

Explore how artificial intelligence is revolutionizing web development workflows, making developers more productive and efficient than ever before.

8 min read

1205

15Apr

Workshop

Web Development Workshop 2025

Join us for an intensive workshop on modern web development practices. Learn about the latest frameworks, tools, and techniques from industry experts. This hands-on session will cover everything from frontend development to backend architecture and deployment strategies.

Tue, Apr 15, 2025

9:00 AM - 5:00 PM

Tech Innovation Hub

123 Developer Street, Silicon Valley, CA

45 going

5 spots left

$299

Revenue Overview

Monthly revenue performance and key metrics

Total Revenue

$48,234

12.5%

vs. last month

Average Order Value

$156

3.2%

vs. last month

Conversion Rate

3.8%

1.1%

vs. last month

Active Customers

1,429

8.4%

vs. last month

Button States

Demonstration of primary button states: normal, hover, active, and disabled

Normal State

Hover State

Active State

Interactive Example

Disabled State

Sarah Wilson

Senior Product Designer

Passionate about creating beautiful and functional user experiences. Focused on design systems and component-driven development.

Colors close to Azure

Alice Blue Mint Cream Ghost White White Honey Dew White Smoke Light Cyan Snow

All 139 named colors