HueHive

Palette Description

Based on your specification for a primary color palette with a range from 50 to A700, centered around your primary background color #171f53 , I’ve created a comprehensive color palette that adheres to this structure. This palette will provide variations and shades while maintaining a cohesive look.

json
{
  "palette_name": "Thingsboard Primary Color Palette",
  "colors": [
    {
      "name": "Lightest Navy",
      "hex_code": "
                            
                            #E3E8F5
                        "  // 50
    },
    {
      "name": "Lighter Navy",
      "hex_code": "
                            
                            #B2B8E0
                        "  // 100
    },
    {
      "name": "Light Navy",
      "hex_code": "
                            
                            #7A82C6
                        "  // 200
    },
    {
      "name": "Medium Navy",
      "hex_code": "
                            
                            #4B5B9D
                        "  // 300
    },
    {
      "name": "Primary Navy",
      "hex_code": "
                            
                            #171f53
                        "  // 500
    },
    {
      "name": "Dark Navy",
      "hex_code": "
                            
                            #10162A
                        "  // 600
    },
    {
      "name": "Darker Navy",
      "hex_code": "
                            
                            #0D0F1A
                        "  // 700
    },
    {
      "name": "Deep Navy",
      "hex_code": "
                            
                            #0A0D1A
                        "  // A100
    },
    {
      "name": "Rich Navy",
      "hex_code": "
                            
                            #03050C
                        "  // A200
    },
    {
      "name": "Ultimate Navy",
      "hex_code": "
                            
                            #000000
                        "  // A700
    }
  ]
}

Palette Description:

• Lightest Navy ( #E3E8F5 ): Very light shade for backgrounds or light text.
• Lighter Navy ( #B2B8E0 ): Good for secondary backgrounds or lighter elements.
• Light Navy ( #7A82C6 ): Suitable for hover states or subtle accents.
• Medium Navy ( #4B5B9D ): Can be used for secondary buttons or panels.
• Primary Navy ( #171f53 ): Your primary background color, used for main areas.
• Dark Navy ( #10162A ): Works well for text on lighter backgrounds.
• Darker Navy ( #0D0F1A ): Great for headers or footers, providing strong contrast.
• Deep Navy ( #0A0D1A ): Use for overlays or darker sections.
• Rich Navy ( #03050C ): Excellent for shadows or depth effects.
• Ultimate Navy ( #000000 ): Absolute black for text or high-contrast elements.

Would you like further assistance on how to implement this palette in your design or specific UI components?