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
ホーム/カラー/#686FC3

最も近い色名 · #686FC3

#686FC3

最も近い色名: Flood

#686FC3(rgb(104 111 195)、hsl(235 43% 59%)、oklch(0.575 0.128 277.9))に最も近い色名はFloodです。ティント、シェード、ハーモニー、WCAG/APCAコントラスト、CSS・Tailwind v4・SCSSコードを確認できます。

What does Blue mean? →

#686FC3

oklch(0.575 0.128 277.9)

カラー変換

HEX
#686fc3
RGB
rgb(104 111 195)
HSL
hsl(235 43% 59%)
HWB
hwb(235 41% 24%)
OKLCH
oklch(0.575 0.128 277.9)
OKLab
oklab(0.575 0.018 -0.127)
CIE Lab
lab(49.23 14.63 -45.56)
LCH
lch(49.23 47.85 287.8)
CMYK
cmyk(47% 43% 0% 24%)

ティント · シェード · トーン

ティント

  • 757DCA
  • 838CD0
  • 929AD7
  • A0A8DD
  • AFB6E3
  • BFC5E9
  • CED3EF
  • DEE2F4
  • EFF0FA

シェード

  • 5960A9
  • 4B5190
  • 3E4278
  • 303460
  • 24274A
  • 181A34
  • 0C0E20
  • 04040E
  • 000102

トーン

  • 6A71BD
  • 6C73B6
  • 6E75B0
  • 7177A9
  • 7379A3
  • 767B9C
  • 787C95
  • 7B7E8E
  • 7D7F87

カラーハーモニー

補色 +180°

  • 686FC3

    Flood

  • 8C7800

    ≈ Jīn Zōng Gold

類似色 -30° +30°

  • 686FC3

    Flood

  • 2E7DC0

    ≈ Amalfi Coast

  • 8E62B3

    ≈ Lusty Lavender

トライアド +120° +240°

  • 686FC3

    Flood

  • B75A3D

    ≈ Sun-Kissed Brick

  • 178F5B

    ≈ Emerald Lake

スプリットコンプリメンタリー +150° +210°

  • 686FC3

    Flood

  • A96800

    ≈ Butter Fudge

  • 638628

    ≈ Weeping Fig

テトラード +90° +180° +270°

  • 686FC3

    Flood

  • B6546A

    ≈ Tulip Red

  • 8C7800

    ≈ Jīn Zōng Gold

  • 008B84

    ≈ Clear Turquoise

コントラストとアクセシビリティ

Ag

白の上

WCAG 4.51:1 · APCA Lc 71

AA
Ag

黒の上

WCAG 4.65:1 · APCA Lc 30

AA

最適な文字色: #000000

WCAG 4.65:1 (AA) · APCA Lc 30

Contrast pairs

  • #686FC3 / #FFFFFF
  • #686FC3 / #000000
  • #FFFFFF / #686FC3
  • #000000 / #686FC3

コードスニペット

CSS

:root {
  --flood: #686fc3;
  --flood-rgb: 104 111 195;
  --flood-oklch: oklch(0.575 0.128 277.9);
}

.element {
  color: var(--flood);
  background-color: hsl(235 43% 59%);
  border-color: oklch(0.575 0.128 277.9);
}

Tailwind CSS v4

@theme {
  --color-flood: #686fc3;
  --color-flood-50: #edf2ff;
  --color-flood-100: #dfe4ff;
  --color-flood-200: #c9cfff;
  --color-flood-300: #aab0f8;
  --color-flood-400: #8d96e9;
  --color-flood-500: #737bd9;
  --color-flood-600: #6268b7;
  --color-flood-700: #4e5393;
  --color-flood-800: #373d6e;
  --color-flood-900: #252a4e;
  --color-flood-950: #141733;
}

SCSS

$flood: #686fc3;
$flood-rgb: 104, 111, 195;
$flood-light: mix(#fff, $flood, 20%);
$flood-dark: mix(#000, $flood, 20%);

.element {
  color: $flood;
  box-shadow: 0 0 0 2px rgba($flood, 0.35);
}

近い色名

  • 746CC0

    Purple Toolbox

  • 6370B6

    Gladiola Blue

  • 5D76CB

    Indigo Light

  • 666FB4

    Chetwode Blue

  • 6F6ED1

    C64 Purple

  • 6666BB

    Bluish Purple Anemone

  • 7A6DC0

    Venus Violet

  • 7366BD

    Ultra Violet

  • 6677BB

    Flood

  • 6875B7

    Wind Star

  • 6373B4

    Wild Pansy

  • 696DB0

    Mediaeval

Palettes with similar colors

  • Loch Ness CanvasPink · 9 Colors
  • True Loch Ness SignalPink · Monochromatic
  • True Loch Ness SignalPink · 6 Colors
  • Loch Ness NexusPink · Rainbow
  • Pure Loch Ness OrchardPink · 5 Colors
  • Steady Loch Ness CascadePink · 5 Colors

ツールで開く

ピッカーペアコントラストチェッカーStudioJSON API
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