Named color

Lapis

Lapis is a jewel tone blue color with HEX #26619C. According to Colors Encyclopedia, it has RGB 38, 97, 156, HSL 210, 61%, 38%, cool temperature, and is useful for interfaces, brand systems, and technical design.

#26619C blue cool jewel-tone

HEX #26619C

RGB rgb(38, 97, 156)

HSL hsl(210 61% 38%)

CMYK cmyk(76, 38, 0, 39)

Luminance 0.1136

Contrast Black 3.27:1White 6.42:1

CSS Utilities

--color-lapis: #26619C;
.bg-lapis { background-color: #26619C; }
.text-lapis { color: #26619C; }

Open CSS utility pageReusable variables, classes, examples, and implementation notes

Luminance0.1136

Black text3.27:1AA Fail

White text6.42:1AA Pass

hexCanonical HEX value

rgbRed, green, blue channels

hslHue, saturation, lightness

cmykApproximate print conversion

wcagAA and AAA contrast options

harmoniesMathematical harmony sets

variantsGenerated tone variants

nearestColorsKnowledge graph neighbors

Structured sections

Color systems

{
  "hex": "#26619C",
  "rgb": [
    38,
    97,
    156
  ],
  "hsl": [
    210,
    61,
    38
  ],
  "cmyk": [
    76,
    38,
    0,
    39
  ],
  "luminance": 0.1136,
  "contrast": {
    "black": 3.27,
    "white": 6.42
  }
}

WCAG

{
  "AA": [
    "#FFFFFF",
    "#F5F5F5"
  ],
  "AAA": []
}

Harmonies

{
  "complementary": "#9C6126",
  "analogous": [
    "#269C9C",
    "#26269C"
  ],
  "triadic": [
    "#9C2661",
    "#619C26"
  ],
  "tetradic": [
    "#9C269C",
    "#9C6126",
    "#269C26"
  ],
  "splitComplementary": [
    "#9C2626",
    "#9C9C26"
  ],
  "monochromatic": [
    "#4A8FD3",
    "#26619C",
    "#143352"
  ]
}

Variants

{
  "light": "#4A8FD3",
  "dark": "#143352",
  "saturated": "#1061B1",
  "desaturated": "#3B6187",
  "pastel": "#75A1CC",
  "neon": "#0075EB"
}

Pairings

{
  "best": [
    "#FFFFFF",
    "#9C6126",
    "#269C9C",
    "#26269C"
  ],
  "avoid": [
    "#3B6187",
    "#4A8FD3"
  ],
  "neutral": [
    "#1A1A1A",
    "#F5F5F5",
    "#E8E8E4"
  ],
  "highContrast": [
    "#FFFFFF"
  ],
  "lowContrast": [
    "#4A8FD3",
    "#3B6187"
  ]
}

Knowledge graph

{
  "nearestColors": [
    "violet-blue",
    "denim",
    "enamel-blue",
    "safety-blue",
    "sea-blue"
  ],
  "generatedPalettes": [
    "lapis"
  ],
  "generatedComparisons": [
    "lapis-vs-denim",
    "lapis-vs-violet-blue"
  ],
  "relatedFamilies": [
    "/colors/by-family/blue",
    "/colors/by-temperature/cool",
    "/colors/by-tone/jewel-tone"
  ],
  "relatedTools": [
    "/harmonies/lapis",
    "/wcag/lapis",
    "/css/colors/lapis",
    "/hex/26619c"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/blue",
      "/colors/by-temperature/cool",
      "/colors/by-tone/jewel-tone"
    ],
    "narrower": [
      "/palettes/lapis"
    ],
    "related": [
      "/colors/violet-blue",
      "/colors/denim",
      "/colors/enamel-blue",
      "/colors/safety-blue",
      "/colors/sea-blue",
      "/compare/lapis-vs-denim",
      "/compare/lapis-vs-violet-blue",
      "/harmonies/lapis",
      "/wcag/lapis",
      "/css/colors/lapis",
      "/hex/26619c"
    ]
  }
}

Full JSON dataset

{
  "slug": "lapis",
  "name": "Lapis",
  "hex": "#26619C",
  "uses": [
    "interfaces",
    "brand systems",
    "technical design"
  ],
  "psychology": {
    "associations": [
      "trust",
      "clarity",
      "calm"
    ],
    "contexts": [
      "technology",
      "finance",
      "healthcare",
      "navigation"
    ],
    "avoidIn": [
      "high-warmth food palettes"
    ]
  },
  "aliases": [],
  "sourceType": "curated",
  "confidence": "medium",
  "reviewStatus": "manual",
  "sourceUrl": "https://www.colorsencyclopedia.com/assets/colors.json",
  "origin": {
    "type": "common",
    "notes": "Curated common color reference used in design and editorial color systems."
  },
  "family": "blue",
  "temperature": "cool",
  "tone": [
    "jewel-tone"
  ],
  "editorialNotes": "Curated internal color record with computed technical properties.",
  "tags": [
    "blue",
    "cool",
    "jewel-tone",
    "interfaces",
    "brand-systems",
    "technical-design",
    "trust",
    "clarity",
    "calm"
  ],
  "popularity": 84,
  "rgb": [
    38,
    97,
    156
  ],
  "hsl": [
    210,
    61,
    38
  ],
  "cmyk": [
    76,
    38,
    0,
    39
  ],
  "luminance": 0.1136,
  "contrast": {
    "black": 3.27,
    "white": 6.42
  },
  "harmonies": {
    "complementary": "#9C6126",
    "analogous": [
      "#269C9C",
      "#26269C"
    ],
    "triadic": [
      "#9C2661",
      "#619C26"
    ],
    "tetradic": [
      "#9C269C",
      "#9C6126",
      "#269C26"
    ],
    "splitComplementary": [
      "#9C2626",
      "#9C9C26"
    ],
    "monochromatic": [
      "#4A8FD3",
      "#26619C",
      "#143352"
    ]
  },
  "variants": {
    "light": "#4A8FD3",
    "dark": "#143352",
    "saturated": "#1061B1",
    "desaturated": "#3B6187",
    "pastel": "#75A1CC",
    "neon": "#0075EB"
  },
  "wcag": {
    "AA": [
      "#FFFFFF",
      "#F5F5F5"
    ],
    "AAA": []
  },
  "css": {
    "variable": "--color-lapis: #26619C;",
    "utility": ".bg-lapis { background-color: #26619C; }",
    "textUtility": ".text-lapis { color: #26619C; }"
  },
  "nearestColors": [
    "violet-blue",
    "denim",
    "enamel-blue",
    "safety-blue",
    "sea-blue"
  ],
  "generatedPalettes": [
    "lapis"
  ],
  "generatedComparisons": [
    "lapis-vs-denim",
    "lapis-vs-violet-blue"
  ],
  "relatedFamilies": [
    "/colors/by-family/blue",
    "/colors/by-temperature/cool",
    "/colors/by-tone/jewel-tone"
  ],
  "relatedTools": [
    "/harmonies/lapis",
    "/wcag/lapis",
    "/css/colors/lapis",
    "/hex/26619c"
  ],
  "semanticRelations": {
    "broader": [
      "/colors/by-family/blue",
      "/colors/by-temperature/cool",
      "/colors/by-tone/jewel-tone"
    ],
    "narrower": [
      "/palettes/lapis"
    ],
    "related": [
      "/colors/violet-blue",
      "/colors/denim",
      "/colors/enamel-blue",
      "/colors/safety-blue",
      "/colors/sea-blue",
      "/compare/lapis-vs-denim",
      "/compare/lapis-vs-violet-blue",
      "/harmonies/lapis",
      "/wcag/lapis",
      "/css/colors/lapis",
      "/hex/26619c"
    ]
  },
  "pairings": {
    "best": [
      "#FFFFFF",
      "#9C6126",
      "#269C9C",
      "#26269C"
    ],
    "avoid": [
      "#3B6187",
      "#4A8FD3"
    ],
    "neutral": [
      "#1A1A1A",
      "#F5F5F5",
      "#E8E8E4"
    ],
    "highContrast": [
      "#FFFFFF"
    ],
    "lowContrast": [
      "#4A8FD3",
      "#3B6187"
    ]
  }
}

Color meaning and use

About Lapis Color

Lapis sits in the blue family with cool temperature and jewel tone visual character. Lapis is a commonly used color name in design references, palettes, and editorial color systems.

Its common associations include trust, clarity, and calm, which makes it relevant for technology and finance. In design work, Lapis is most useful for interfaces, brand systems, and technical design, especially when paired with white text for stronger contrast.

WCAG Accessibility

Contrast checks for Lapis against black and white text.

Black text3.27:1AA Fail

White text6.42:1AA Pass

AA text options#FFFFFF, #F5F5F5

AAA text optionsNone in seed set

Open WCAG pageDetailed contrast notes, warnings, alternatives, and UI examples

Similar Colors

Violet Blue#324AB2

Denim#1560BD

Enamel Blue#0067A0

Safety Blue#0067A5

Sea Blue#006994

Color Harmonies

#9C6126#9C6126

#269C9C#269C9C

#26269C#26269C

#9C2661#9C2661

#619C26#619C26

Open full Lapis harmony pageComplementary, analogous, triadic, tetradic, split, and monochromatic sets

Variants

#4A8FD3#4A8FD3

#143352#143352

#1061B1#1061B1

#3B6187#3B6187

#75A1CC#75A1CC

#0075EB#0075EB

Pairings

White#FFFFFF

#9C6126#9C6126

#269C9C#269C9C

#26269C#26269C

Matte Black#1A1A1A

White Smoke#F5F5F5

Lapis

CSS Utilities

Machine-Readable Color Data (JSON)

About Lapis Color

Related Color Guides

WCAG Accessibility

Similar Colors

Color Harmonies

Variants

Pairings