Procurement Supply Chain

Vendor procurement and purchase order workflow palette balancing enterprise navy with approval teal.

#Business#Clean#Modern#Cool#UI
Open in Generator
COLOR 1
#0F172A
Slate 900
COLOR 2
#0369A1
Lapis Lazuli
COLOR 3
#0D9488
Dark Cyan
COLOR 4
#14B8A6
Teal 500
COLOR 5
#F0FDFA
Mint Cream

Color Values & Codes

HEX · RGB · HSL
Slate 900
#0F172A
rgb(15, 23, 42)hsl(222, 47%, 11%)Color details →
rgb(3, 105, 161)hsl(201, 96%, 32%)Color details →
Dark Cyan
#0D9488
rgb(13, 148, 136)hsl(175, 84%, 32%)Color details →
Teal 500
#14B8A6
rgb(20, 184, 166)hsl(173, 80%, 40%)Color details →
Mint Cream
#F0FDFA
rgb(240, 253, 250)hsl(166, 76%, 97%)Color details →

CSS Variables

Copy & paste directly into your stylesheet
:root {
  --color-1: #0F172A;
  --color-2: #0369A1;
  --color-3: #0D9488;
  --color-4: #14B8A6;
  --color-5: #F0FDFA;
}

Role-Based WCAG Contrast Audit

Accessibility contrast depends on assigned UI roles. Here are the contrast ratios and WCAG compliance ratings when pairing palette colors as Foreground Text against Background surfaces:

Sample Text
#0F172A on #14B8A67.17:1
Normal Text AA Pass
Sample Text
#0F172A on #F0FDFA17.12:1
Normal Text AA Pass
Sample Text
#0369A1 on #14B8A62.38:1
Large Text Only (Fail)
Sample Text
#0369A1 on #F0FDFA5.69:1
Normal Text AA Pass
Sample Text
#0D9488 on #14B8A61.50:1
Large Text Only (Fail)
Sample Text
#0D9488 on #F0FDFA3.59:1
Large Text Only (Pass)