Dynamic Light And Dark Theme

303 views
Accent Light #1171BB
Accent Dark #0d5a99
Secondary Light #FF9F1C
Secondary Dark #e88f19
Background Gradient Start Light #e8eef6
Background Gradient End Light #dce4f0
Background Card Light #ffffff
Background Gradient Start Dark #111827
Background Gradient End Dark #0f172a
Background Card Dark #1f2937
Text Light #212D40
Text Dark #e5e7eb
Success #10b981
Error #ef4444
Success Dark #34d399
Error Dark #f87171
#1171BB Accent Light
#0d5a99 Accent Dark
#FF9F1C Secondary Light
#e88f19 Secondary Dark
#e8eef6 Background Gradient Start Light
#dce4f0 Background Gradient End Light
#ffffff Background Card Light
#111827 Background Gradient Start Dark
#0f172a Background Gradient End Dark
#1f2937 Background Card Dark
#212D40 Text Light
#e5e7eb Text Dark
#10b981 Success
#ef4444 Error
#34d399 Success Dark
#f87171 Error Dark

About This Color Palette

Here’s a color palette based on your CSS variables for both light and dark modes:

json
{
  "palette_name": "Dynamic Light and Dark Theme",
  "colors": [
    {
      "name": "Accent Light",
      "hex_code": "
          
          #1171BB
       "
    },
    {
      "name": "Accent Dark",
      "hex_code": "
          
          #0d5a99
       "
    },
    {
      "name": "Secondary Light",
      "hex_code": "
          
          #FF9F1C
       "
    },
    {
      "name": "Secondary Dark",
      "hex_code": "
          
          #e88f19
       "
    },
    {
      "name": "Background Gradient Start Light",
      "hex_code": "
          
          #e8eef6
       "
    },
    {
      "name": "Background Gradient End Light",
      "hex_code": "
          
          #dce4f0
       "
    },
    {
      "name": "Background Card Light",
      "hex_code": "
          
          #ffffff
       "
    },
    {
      "name": "Background Gradient Start Dark",
      "hex_code": "
          
          #111827
       "
    },
    {
      "name": "Background Gradient End Dark",
      "hex_code": "
          
          #0f172a
       "
    },
    {
      "name": "Background Card Dark",
      "hex_code": "
          
          #1f2937
       "
    },
    {
      "name": "Text Light",
      "hex_code": "
          
          #212D40
       "
    },
    {
      "name": "Text Dark",
      "hex_code": "
          
          #e5e7eb
       "
    },
    {
      "name": "Success",
      "hex_code": "
          
          #10b981
       "
    },
    {
      "name": "Error",
      "hex_code": "
          
          #ef4444
       "
    },
    {
      "name": "Success Dark",
      "hex_code": "
          
          #34d399
       "
    },
    {
      "name": "Error Dark",
      "hex_code": "
          
          #f87171
       "
    }
  ]
}

This palette includes key colors from both the light mode and dark mode defined in your CSS. Each color serves a specific purpose, such as accents, backgrounds, text, and status indicators (success and error).

Would you like to explore more colors or create a different theme?

Other Similar Palettes

#F2C6A2
#003366
#E8D7C3
#F5BDAF
#001F3F
#F9FAFB
#FFFFFF
#E5E7EB
#111827
#4B5563
#9CA3AF
#1A73E8
#2EC4B6
#16A34A
#DC2626
#F59E0B
#CBD5E0
#E5E7EB
#1A73E8
#315B61
#F59E0B
#DC2626
#0B1120
#020617
#111827
#E5E7EB
#9CA3AF
#6B7280
#1A73E8
#2EC4B6
#22C55E
#F97373
#FACC15
#1F2937
#374151
#7EBCF9
#9EC8A4
#FBBF24
#F97373
#333333
#FFFFFF
#00FFFF
#FF4500
#FF00FF
#32CD32
#3E2A23
#BFA986
#F4ECE3
#D1A670