Colorise ProOKLCH Engine
ExploreStudioNamesPickerPairs
ExploreStudioNamesPickerPairsContrastExtract
Menu

Product

  • Home
  • Explore
  • Studio
  • Color Names

Tools

  • Picker
  • Color Pairs
  • Contrast
  • Image Extract
  • Gradient Lab
  • Palette Diff
  • Brand from URL

Guides

  • All guides
  • OKLCH vs HSL
  • WCAG vs APCA
  • OKLCH color scales
  • Gamut & sRGB
  • Extract from images
  • HEX to OKLCH
  • Dark mode colors
  • Color meanings
Home/Explore/Waikiki Beacon

Palette · 5 colors · Lc 8.8

Waikiki Beacon palette

Waikiki Beacon: a 5-color palette (Blue, Cold, Ocean, Nature). HEX, RGB, HSL and OKLCH for #D7F2F6, #75C0C3, #0087A1, #00504B, #000D14, WCAG contrast on white and black, plus CSS variables, Tailwind and JSON export.

  • Blue
  • Cold
  • Ocean
  • Nature
  • 5 Colors

bg

#D7F2F6

surface

#75C0C3

primary

#0087A1

accent

#00504B

text

#000D14

Open in StudioOpen in PickerAll palettes

Colors in Waikiki Beacon: HEX, RGB, HSL & OKLCH

  • bg

    #D7F2F6

    #D7F2F6 color page →
    RGB
    rgb(215 242 246)
    HSL
    hsl(188 63% 90%)
    OKLCH
    oklch(0.943 0.029 207.4)

    WCAG contrast: on white 1.17:1 (Fail) · on black 17.92:1 (AAA)

  • surface

    #75C0C3

    #75C0C3 color page →
    RGB
    rgb(117 192 195)
    HSL
    hsl(182 39% 61%)
    OKLCH
    oklch(0.76 0.075 199)

    WCAG contrast: on white 2.08:1 (Fail) · on black 10.08:1 (AAA)

  • primary

    #0087A1

    #0087A1 color page →
    RGB
    rgb(0 135 161)
    HSL
    hsl(190 100% 32%)
    OKLCH
    oklch(0.575 0.103 217.7)

    WCAG contrast: on white 4.21:1 (Fail) · on black 4.98:1 (AA)

  • accent

    #00504B

    #00504B color page →
    RGB
    rgb(0 80 75)
    HSL
    hsl(176 100% 16%)
    OKLCH
    oklch(0.388 0.068 187.6)

    WCAG contrast: on white 9.33:1 (AAA) · on black 2.24:1 (Fail)

  • text

    #000D14

    #000D14 color page →
    RGB
    rgb(0 13 20)
    HSL
    hsl(201 100% 4%)
    OKLCH
    oklch(0.148 0.029 226.8)

    WCAG contrast: on white 19.66:1 (AAA) · on black 1.06:1 (Fail)

Export Waikiki Beacon: CSS variables, Tailwind & JSON

CSS variables

:root {
  --bg: #d7f2f6;
  --surface: #75c0c3;
  --primary: #0087a1;
  --accent: #00504b;
  --text: #000d14;
}

Tailwind CSS v4 @theme

@theme {
  --color-bg: #d7f2f6;
  --color-surface: #75c0c3;
  --color-primary: #0087a1;
  --color-accent: #00504b;
  --color-text: #000d14;
}

JSON (DTCG tokens)

{
  "waikiki-beacon-tw": {
    "bg": {
      "$type": "color",
      "$value": "#d7f2f6"
    },
    "surface": {
      "$type": "color",
      "$value": "#75c0c3"
    },
    "primary": {
      "$type": "color",
      "$value": "#0087a1"
    },
    "accent": {
      "$type": "color",
      "$value": "#00504b"
    },
    "text": {
      "$type": "color",
      "$value": "#000d14"
    }
  }
}

About this palette

Waikiki Beacon is a 5-color OKLCH-ready palette tagged blue, cold, ocean, nature, 5 colors. Hex values: #D7F2F6, #75C0C3, #0087A1, #00504B, #000D14. APCA contrast score Lc 8.8. Open it in Colorise Pro Studio to lock roles and regenerate harmonies.

Related palettes

Shared tags, similar size and contrast.

  • Steady Jade Jewel DeltaBlue · Cold
  • Classic Bleu Ciel CanvasBlue · Cold
  • Pure Ahoy! Blue KilnBlue · Cold
  • Pure Pristine Seas HarborBlue · Cold
  • True Cruising PulseBlue · Cold
  • Pure Pacific Pleasure ArchiveBlue · Cold

Palettes with similar colors

Closest to Waikiki Beacon by OKLab color distance.

  • True Cruising MeadowBlue · Cold
  • True Ahoy! Blue DeltaBlue · Cold
  • Classic Ahoy! Blue VaultBlue · Cold
  • Bermuda EmberBlue · Cold
  • Steady Pacific Pleasure SystemBlue · Cold
  • True Ahoy! Blue ForgeBlue · Cold
Colorise Pro

Free OKLCH color workspace: precision color picker, color pairs, WCAG & APCA contrast checker, palette from image, Studio systems, names, gradients, and brand tools. Export HEX, CSS, Tailwind & DTCG.

OKLCH Engine

Product

  • Home
  • Explore
  • Studio
  • Color Names
  • Color Codes

Tools

  • Color Picker
  • Color Pairs
  • Contrast Checker
  • Image Extract
  • Gradient Lab
  • Palette Diff
  • Brand from URL
  • For presentations
  • For business cards
  • For SaaS landings
  • Duo pairs
  • Trio systems

Guides

  • All guides
  • OKLCH vs HSL
  • WCAG vs APCA
  • OKLCH color scales
  • Gamut & sRGB
  • Extract from images
  • HEX to OKLCH
  • Dark mode colors
  • Color meanings

Legal

  • Privacy
  • Terms

© 2026 Colorise Pro. All rights reserved.

© 2026 Colorise Pro. Built for precision color work.

Report infringement: [email protected] (Colorise Pro)

PrivacyTermsOKLCH · WCAG · APCA