Huehive Logo

HueHive
Login
Signup

Light And Dark Mode Palette

287 views
App Background (Light) #F9FAFB
Cards / Panels (Light) #FFFFFF
Subtle Section Background (Light) #E5E7EB
Primary Text (Light) #111827
Secondary Text (Light) #4B5563
Muted Labels (Light) #9CA3AF
Primary Color (Light) #1A73E8
Secondary Color (Light) #2EC4B6
Positive Color (Light) #16A34A
Negative Color (Light) #DC2626
Warning Color (Light) #F59E0B
Light Border #CBD5E0
Table Gridlines (Light) #E5E7EB
Series 1 (Actual, Light) #1A73E8
Series 2 (Budget, Light) #315B61
Series 3 (Forecast, Light) #F59E0B
Anomalies / Outliers (Light) #DC2626
App Background (Dark) #0B1120
Cards / Panels (Dark) #020617
Elevated Sections (Dark) #111827
Primary Text (Dark) #E5E7EB
Secondary Text (Dark) #9CA3AF
Muted Labels (Dark) #6B7280
Primary Color (Dark) #1A73E8
Secondary Color (Dark) #2EC4B6
Positive Color (Dark) #22C55E
Negative Color (Dark) #F97373
Warning Color (Dark) #FACC15
Card Border (Dark) #1F2937
Table Gridlines (Dark) #374151
Series 1 (Actual, Dark) #7EBCF9
Series 2 (Budget, Dark) #9EC8A4
Series 3 (Forecast, Dark) #FBBF24
Anomalies (Dark) #F97373
#F9FAFB App Background (Light)
#FFFFFF Cards / Panels (Light)
#E5E7EB Subtle Section Background (Light)
#111827 Primary Text (Light)
#4B5563 Secondary Text (Light)
#9CA3AF Muted Labels (Light)
#1A73E8 Primary Color (Light)
#2EC4B6 Secondary Color (Light)
#16A34A Positive Color (Light)
#DC2626 Negative Color (Light)
#F59E0B Warning Color (Light)
#CBD5E0 Light Border
#E5E7EB Table Gridlines (Light)
#1A73E8 Series 1 (Actual, Light)
#315B61 Series 2 (Budget, Light)
#F59E0B Series 3 (Forecast, Light)
#DC2626 Anomalies / Outliers (Light)
#0B1120 App Background (Dark)
#020617 Cards / Panels (Dark)
#111827 Elevated Sections (Dark)
#E5E7EB Primary Text (Dark)
#9CA3AF Secondary Text (Dark)
#6B7280 Muted Labels (Dark)
#1A73E8 Primary Color (Dark)
#2EC4B6 Secondary Color (Dark)
#22C55E Positive Color (Dark)
#F97373 Negative Color (Dark)
#FACC15 Warning Color (Dark)
#1F2937 Card Border (Dark)
#374151 Table Gridlines (Dark)
#7EBCF9 Series 1 (Actual, Dark)
#9EC8A4 Series 2 (Budget, Dark)
#FBBF24 Series 3 (Forecast, Dark)
#F97373 Anomalies (Dark)

Light and Dark Mode Palette

0

About This Color Palette

Here is a color palette based on your light and dark mode queries:

json
{
  "palette_name": "Light and Dark Mode Palette",
  "colors": [
    {
      "name": "App Background (Light)",
      "hex_code": "
          
          #F9FAFB
       "
    },
    {
      "name": "Cards / Panels (Light)",
      "hex_code": "
          
          #FFFFFF
       "
    },
    {
      "name": "Subtle Section Background (Light)",
      "hex_code": "
          
          #E5E7EB
       "
    },
    {
      "name": "Primary Text (Light)",
      "hex_code": "
          
          #111827
       "
    },
    {
      "name": "Secondary Text (Light)",
      "hex_code": "
          
          #4B5563
       "
    },
    {
      "name": "Muted Labels (Light)",
      "hex_code": "
          
          #9CA3AF
       "
    },
    {
      "name": "Primary Color (Light)",
      "hex_code": "
          
          #1A73E8
       "
    },
    {
      "name": "Secondary Color (Light)",
      "hex_code": "
          
          #2EC4B6
       "
    },
    {
      "name": "Positive Color (Light)",
      "hex_code": "
          
          #16A34A
       "
    },
    {
      "name": "Negative Color (Light)",
      "hex_code": "
          
          #DC2626
       "
    },
    {
      "name": "Warning Color (Light)",
      "hex_code": "
          
          #F59E0B
       "
    },
    {
      "name": "Light Border",
      "hex_code": "
          
          #CBD5E0
       "
    },
    {
      "name": "Table Gridlines (Light)",
      "hex_code": "
          
          #E5E7EB
       "
    },
    {
      "name": "Series 1 (Actual, Light)",
      "hex_code": "
          
          #1A73E8
       "
    },
    {
      "name": "Series 2 (Budget, Light)",
      "hex_code": "
          
          #315B61
       "
    },
    {
      "name": "Series 3 (Forecast, Light)",
      "hex_code": "
          
          #F59E0B
       "
    },
    {
      "name": "Anomalies / Outliers (Light)",
      "hex_code": "
          
          #DC2626
       "
    },
    {
      "name": "App Background (Dark)",
      "hex_code": "
          
          #0B1120
       "
    },
    {
      "name": "Cards / Panels (Dark)",
      "hex_code": "
          
          #020617
       "
    },
    {
      "name": "Elevated Sections (Dark)",
      "hex_code": "
          
          #111827
       "
    },
    {
      "name": "Primary Text (Dark)",
      "hex_code": "
          
          #E5E7EB
       "
    },
    {
      "name": "Secondary Text (Dark)",
      "hex_code": "
          
          #9CA3AF
       "
    },
    {
      "name": "Muted Labels (Dark)",
      "hex_code": "
          
          #6B7280
       "
    },
    {
      "name": "Primary Color (Dark)",
      "hex_code": "
          
          #1A73E8
       "
    },
    {
      "name": "Secondary Color (Dark)",
      "hex_code": "
          
          #2EC4B6
       "
    },
    {
      "name": "Positive Color (Dark)",
      "hex_code": "
          
          #22C55E
       "
    },
    {
      "name": "Negative Color (Dark)",
      "hex_code": "
          
          #F97373
       "
    },
    {
      "name": "Warning Color (Dark)",
      "hex_code": "
          
          #FACC15
       "
    },
    {
      "name": "Card Border (Dark)",
      "hex_code": "
          
          #1F2937
       "
    },
    {
      "name": "Table Gridlines (Dark)",
      "hex_code": "
          
          #374151
       "
    },
    {
      "name": "Series 1 (Actual, Dark)",
      "hex_code": "
          
          #7EBCF9
       "
    },
    {
      "name": "Series 2 (Budget, Dark)",
      "hex_code": "
          
          #9EC8A4
       "
    },
    {
      "name": "Series 3 (Forecast, Dark)",
      "hex_code": "
          
          #FBBF24
       "
    },
    {
      "name": "Anomalies (Dark)",
      "hex_code": "
          
          #F97373
       "
    }
  ]
}

This palette includes colors for both light and dark modes, ensuring that your application can maintain a cohesive look and feel regardless of the user’s preference.

Do you need any specific adjustments to this palette or any additional colors?

What would you like to do?

Open in Generator

Edit and refine these colors in the generator

Open in Converter

Convert formats & find color harmonies

Search Other Palettes

Explore thousands of color palettes

Create New Palette

Generate a custom palette from scratch

Other Similar Palettes

#8bc8fa
#1e1a23
#a78cd5
#373047
#e0b0ff
#0c0a11
#f0e6f8
Twilight Majesty Dark Mode
531
#007BFF
#FFFFFF
#FFDD57
#F0F4F8
#333333
#87CEEB
Blue and White (Trust & Reliability) β€’ Primary: #007BFF (Bright Blue) β€’ Sec...
655
#333333
#FFFFFF
#00FFFF
#FF4500
#FF00FF
#32CD32
Generate a high contrast color palette that works for both light and dark mode
441
#0f0f0f
#00BFFF
#F5F5F5
#FF4D4D
Here’s a **summary** of the web design idea πŸ‘‡ --- ### 🌐 **Website Conce...
639
#2C3E50
#1ABC9C
#E67E22
#7F8C8D
onsidering your focus on project management, technology, and professional dev...
653
#2C3E50
#34495E
#7F8C8D
#3498DB
#1ABC9C
#E67E22
#16A085
#ECF0F1
#F5F6FA
onsidering your focus on project management, technology, and professional dev...
667