Institutional Dark Mode

320 views
Core Background #000000
Panels / Cards #050608
Table Rows Hover #111217
Primary Text #F5F5F5
Secondary Text #B3B3B3
Muted/Labels #7A7A7A
Primary Accent #0068FF
Secondary Accent #4AF6C3
Tertiary Accent #FB8B1E
Up/Gain #00FF00
Down/Loss #FF433D
Warning/Anomaly #FFD600
Border/Gridlines #262626
Axis Lines #333333
Scrollbars/Subtle Separators #1A1A1A
Price/Revenue Actual #4AF6C3
Budget/Benchmark #0068FF
Forecast #FB8B1E
Anomaly Markers #FF433D
Volume/Secondary Series #9E9E9E
#000000 Core Background
#050608 Panels / Cards
#111217 Table Rows Hover
#F5F5F5 Primary Text
#B3B3B3 Secondary Text
#7A7A7A Muted/Labels
#0068FF Primary Accent
#4AF6C3 Secondary Accent
#FB8B1E Tertiary Accent
#00FF00 Up/Gain
#FF433D Down/Loss
#FFD600 Warning/Anomaly
#262626 Border/Gridlines
#333333 Axis Lines
#1A1A1A Scrollbars/Subtle Separators
#4AF6C3 Price/Revenue Actual
#0068FF Budget/Benchmark
#FB8B1E Forecast
#FF433D Anomaly Markers
#9E9E9E Volume/Secondary Series

About This Color Palette

Here’s a color palette inspired by institutional tools like Bloomberg, Goldman, and Morgan Stanley, suitable for a dark mode application. The palette emphasizes high contrast and tight semantic use of color, maintaining a professional and functional aesthetic.

json
{
  "palette_name": "Institutional Dark Mode",
  "colors": [
    {
      "name": "Core Background",
      "hex_code": "
          
          #000000
       "
    },
    {
      "name": "Panels / Cards",
      "hex_code": "
          
          #050608
       "
    },
    {
      "name": "Table Rows Hover",
      "hex_code": "
          
          #111217
       "
    },
    {
      "name": "Primary Text",
      "hex_code": "
          
          #F5F5F5
       "
    },
    {
      "name": "Secondary Text",
      "hex_code": "
          
          #B3B3B3
       "
    },
    {
      "name": "Muted/Labels",
      "hex_code": "
          
          #7A7A7A
       "
    },
    {
      "name": "Primary Accent",
      "hex_code": "
          
          #0068FF
       "
    },
    {
      "name": "Secondary Accent",
      "hex_code": "
          
          #4AF6C3
       "
    },
    {
      "name": "Tertiary Accent",
      "hex_code": "
          
          #FB8B1E
       "
    },
    {
      "name": "Up/Gain",
      "hex_code": "
          
          #00FF00
       "
    },
    {
      "name": "Down/Loss",
      "hex_code": "
          
          #FF433D
       "
    },
    {
      "name": "Warning/Anomaly",
      "hex_code": "
          
          #FFD600
       "
    },
    {
      "name": "Border/Gridlines",
      "hex_code": "
          
          #262626
       "
    },
    {
      "name": "Axis Lines",
      "hex_code": "
          
          #333333
       "
    },
    {
      "name": "Scrollbars/Subtle Separators",
      "hex_code": "
          
          #1A1A1A
       "
    },
    {
      "name": "Price/Revenue Actual",
      "hex_code": "
          
          #4AF6C3
       "
    },
    {
      "name": "Budget/Benchmark",
      "hex_code": "
          
          #0068FF
       "
    },
    {
      "name": "Forecast",
      "hex_code": "
          
          #FB8B1E
       "
    },
    {
      "name": "Anomaly Markers",
      "hex_code": "
          
          #FF433D
       "
    },
    {
      "name": "Volume/Secondary Series",
      "hex_code": "
          
          #9E9E9E
       "
    }
  ]
}

This palette is designed for a dark interface, ensuring high visibility and usability, particularly for data-heavy environments.

Would you like assistance with implementing this palette in your application, or do you need more color options for different themes?

Other Similar Palettes

#E3D5E0
#4A4A4A
#D7A6B6
#F4C3B2
#B7D1E6
#A8C8E3
#B0E2D3
#1E3A5F
#5C4B8A
#2A473F
#C6A600
#BF6C3D
#8B2323
#8BC8FA
#1A1A2E
#8A2BE2
#4B0082
#DDA0DD
#30193D
#E0BBE4
#4A142A
#FFEB3B
#F9A825
#FFF59D
#31081F
#EF9A9A
#B71C1C
#1E1E2F
#6A0F8A
#4B0082
#00BFFF
#2C2C3E
#D8BFD8
#9370DB
#1A1A1A
#FFCC00
#FF9900
#FF3300
#2B2B2B
#FFCC33
#FF6600