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
首页/颜色/#3B77AF

最接近的命名颜色 · #3B77AF

#3B77AF

最接近的命名颜色: Campanula

#3B77AF(rgb(59 119 175)、hsl(209 50% 46%)、oklch(0.555 0.108 248.9))最接近命名颜色 Campanula。查看浅色调、深色调、和谐色、WCAG 与 APCA 对比度,以及 CSS、Tailwind v4 和 SCSS 代码。

What does Blue mean? →

#3B77AF

oklch(0.555 0.108 248.9)

颜色转换

HEX
#3b77af
RGB
rgb(59 119 175)
HSL
hsl(209 50% 46%)
HWB
hwb(209 23% 31%)
OKLCH
oklch(0.555 0.108 248.9)
OKLab
oklab(0.555 -0.039 -0.1)
CIE Lab
lab(48 -6.1 -36.2)
LCH
lch(48 36.71 260.4)
CMYK
cmyk(66% 32% 0% 31%)

浅色调 · 深色调 · 灰色调

浅色调

  • 4F84B7
  • 6392C0
  • 769FC8
  • 89ADD0
  • 9DBAD8
  • B0C8E0
  • C3D5E8
  • D7E3F0
  • EBF1F7

深色调

  • 326798
  • 295781
  • 21476B
  • 193856
  • 112A41
  • 091C2E
  • 04101C
  • 01050B
  • 000101

灰色调

  • 4478AB
  • 4C7AA6
  • 537BA2
  • 5A7C9D
  • 617D98
  • 677D94
  • 6E7E8F
  • 747F8A
  • 7A7F85

配色和谐

互补色 +180°

  • 3B77AF

    Campanula

  • 9B661F

    ≈ Olivia

类似色 -30° +30°

  • 3B77AF

    Campanula

  • 00809B

    ≈ Amazing Sky

  • 666BB1

    ≈ Mediaeval

三角配色 +120° +240°

  • 3B77AF

    Campanula

  • A75666

    ≈ Beef Jerky

  • 5F7F36

    ≈ Hot Pepper Green

分裂互补色 +150° +210°

  • 3B77AF

    Campanula

  • A85B41

    ≈ Colourful Leaves

  • 837316

    ≈ Soft Fig

四角配色 +90° +180° +270°

  • 3B77AF

    Campanula

  • 9C5988

    ≈ Kyo Purple

  • 9B661F

    ≈ Olivia

  • 2D865B

    ≈ Metallic Green

对比度与无障碍

Ag

白底

WCAG 4.72:1 · APCA Lc 73

AA
Ag

黑底

WCAG 4.44:1 · APCA Lc 29

Fail

最佳文字颜色: #FFFFFF

WCAG 4.72:1 (AA) · APCA Lc 73

Contrast pairs

  • #3B77AF / #FFFFFF
  • #3B77AF / #000000
  • #FFFFFF / #3B77AF
  • #000000 / #3B77AF

代码片段

CSS

:root {
  --campanula: #3b77af;
  --campanula-rgb: 59 119 175;
  --campanula-oklch: oklch(0.555 0.108 248.9);
}

.element {
  color: var(--campanula);
  background-color: hsl(209 50% 46%);
  border-color: oklch(0.555 0.108 248.9);
}

Tailwind CSS v4

@theme {
  --color-campanula: #3b77af;
  --color-campanula-50: #dff8ff;
  --color-campanula-100: #ceebff;
  --color-campanula-200: #b3d8ff;
  --color-campanula-300: #8ebced;
  --color-campanula-400: #6aa3db;
  --color-campanula-500: #478bca;
  --color-campanula-600: #3d75aa;
  --color-campanula-700: #315e89;
  --color-campanula-800: #204565;
  --color-campanula-900: #153047;
  --color-campanula-950: #061c2f;
}

SCSS

$campanula: #3b77af;
$campanula-rgb: 59, 119, 175;
$campanula-light: mix(#fff, $campanula, 20%);
$campanula-dark: mix(#000, $campanula, 20%);

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

相近的命名颜色

  • 4278AF

    Viennese Blue

  • 3776AB

    Python Blue

  • 4376AB

    Blue Triumph

  • 4575AD

    Sail On

  • 3F74B1

    Athens

  • 4076B4

    Petrel

  • 4477AA

    Field Blue

  • 3676B5

    North Atlantic Breeze

  • 4579AC

    Sleep

  • 3C73A8

    Flat Blue

  • 4978A9

    Co Pilot

  • 2B7CAF

    Vermeer Blue

Palettes with this color

  • Classic Campanula PulseViolet · Gray

Palettes with similar colors

  • True Mykonos SystemViolet · Cold
  • Classic Mykonos MirrorViolet · Cold
  • Classic Sail On PulseViolet · Cold
  • Steady Haddock’s Sweater DriftViolet · Cold
  • Pure Naval BriefViolet · Cold
  • Pure Sail On BloomViolet · Cold

在工具中打开

取色器配色组合对比度检测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