Huehive Logo

HueHive

/* Css Hex */ Jet: #343330ff; Drab Dark Brown: #45462aff; Field Drab: #7e5920ff; Fulvous: #Dc851fff; Orange Peel: #Ffa737ff; /* Css Hsl */ Jet: Hsla(45, 4%, 20%, 1); Drab Dark Brown: Hsla(62, 25%, 22%, 1); Field Drab: Hsla(36, 59%, 31%, 1); Fulvous: Hsla(32, 75%, 49%, 1); Orange Peel: Hsla(34, 100%, 61%, 1); /* Scss Hex */ $Jet: #343330ff; $Drab Dark Brown: #45462aff; $Field Drab: #7e5920ff; $Fulvous: #Dc851fff; $Orange Peel: #Ffa737ff; /* Scss Hsl */ $Jet: Hsla(45, 4%, 20%, 1); $Drab Dark Brown: Hsla(62, 25%, 22%, 1); $Field Drab: Hsla(36, 59%, 31%, 1); $Fulvous: Hsla(32, 75%, 49%, 1); $Orange Peel: Hsla(34, 100%, 61%, 1); /* Scss Rgb */ $Jet: Rgba(52, 51, 48, 1); $Drab Dark Brown: Rgba(69, 70, 42, 1); $Field Drab: Rgba(126, 89, 32, 1); $Fulvous: Rgba(220, 133, 31, 1); $Orange Peel: Rgba(255, 167, 55, 1); /* Scss Gradient */ $Gradient Top: Linear Gradient(0deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Right: Linear Gradient(90deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Bottom: Linear Gradient(180deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Left: Linear Gradient(270deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Top Right: Linear Gradient(45deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Bottom Right: Linear Gradient(135deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Top Left: Linear Gradient(225deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Bottom Left: Linear Gradient(315deg, #343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff); $Gradient Radial: Radial Gradient(#343330ff, #45462aff, #7e5920ff, #Dc851fff, #Ffa737ff);

Oil #343330
Jungle King #45462a
Hot Curry #7e5920
Soft Pumpkin #dc851f
Mango #ffa737
#343330 Oil
#45462a Jungle King
#7e5920 Hot Curry
#dc851f Soft Pumpkin
#ffa737 Mango

/* CSS HEX */ --jet: #343330ff; --drab-dark-brown: #45462aff; --field-drab: #7e5920ff; --fulvous: #dc851fff; --orange-peel: #ffa737ff; /* CSS HSL */ --jet: hsla(45, 4%, 20%, 1); --drab-dark-brown: hsla(62, 25%, 22%, 1); --field-drab: hsla(36, 59%, 31%, 1); --fulvous: hsla(32, 75%, 49%, 1); --orange-peel: hsla(34, 100%, 61%, 1); /* SCSS HEX */ $jet: #343330ff; $drab-dark-brown: #45462aff; $field-drab: #7e5920ff; $fulvous: #dc851fff; $orange-peel: #ffa737ff; /* SCSS HSL */ $jet: hsla(45, 4%, 20%, 1); $drab-dark-brown: hsla(62, 25%, 22%, 1); $field-drab: hsla(36, 59%, 31%, 1); $fulvous: hsla(32, 75%, 49%, 1); $orange-peel: hsla(34, 100%, 61%, 1); /* SCSS RGB */ $jet: rgba(52, 51, 48, 1); $drab-dark-brown: rgba(69, 70, 42, 1); $field-drab: rgba(126, 89, 32, 1); $fulvous: rgba(220, 133, 31, 1); $orange-peel: rgba(255, 167, 55, 1); /* SCSS Gradient */ $gradient-top: linear-gradient(0deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-right: linear-gradient(90deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-bottom: linear-gradient(180deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-left: linear-gradient(270deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-top-right: linear-gradient(45deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-bottom-right: linear-gradient(135deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-top-left: linear-gradient(225deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-bottom-left: linear-gradient(315deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-radial: radial-gradient(#343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff);

About This Color Palette

Color Palette:

1. Jet
   - Hex Code: 
                            
                            #343330
                        ff
   - Description: A dark shade of brownish-black color resembling the color of jet black.

2. Drab Dark Brown
   - Hex Code: 
                            
                            #45462a
                        ff
   - Description: A deep and dark shade of brown color with a hint of gray.

3. Field Drab
   - Hex Code: 
                            
                            #7e5920
                        ff
   - Description: A warm and earthy shade of brown color resembling the color of drab fields.

4. Fulvous
   - Hex Code: 
                            
                            #dc851f
                        ff
   - Description: A vibrant and warm shade of orange-brown color resembling the color of fulvous.

5. Orange Peel
   - Hex Code: 
                            
                            #ffa737
                        ff
   - Description: A bright and lively shade of orange color resembling the color of orange peel.

6. Gradient
   - Description: A gradient consisting of the five colors from Jet to Orange Peel, creating a smooth transition of colors.

Note: The color palette includes both CSS and SCSS syntax variations, as well as different color representations such as HEX, HSL, and RGB. Additionally, a gradient option is provided for incorporating a smooth transition between the colors.

What would you like to do?

Other Similar Palettes

#977ABA
#4A6EAA
#C5A3D2
#B7B9C8
#F4C2C2
#A8E0D1
#9370DB
#A06EB4
#9966CC
#8B5BAF
#663399
#FF0000
#00FF00
#0000FF
#FFFF00
#00FFFF
#FF00FF
#000000
#FFFFFF
#808080
#D3D3D3
#A9A9A9
#FFA500
#800080
#A52A2A
#FFC0CB
#ADD8E6
#007BFF
#28A745
#FFC107
#DC3545
#17A2B8
#F8F9FA
#343A40
#6F42C1
#A52A2A
#28A745
#212529
#FFFFFF
#FF3D8A
#FF69B4
#D5006D
#5B9BD5
#A0C4E1

Update Your Palette

Current Palette

Oil
Jungle King
Hot Curry
Soft Pumpkin
Mango

/* CSS HEX */ --jet: #343330ff; --drab-dark-brown: #45462aff; --field-drab: #7e5920ff; --fulvous: #dc851fff; --orange-peel: #ffa737ff; /* CSS HSL */ --jet: hsla(45, 4%, 20%, 1); --drab-dark-brown: hsla(62, 25%, 22%, 1); --field-drab: hsla(36, 59%, 31%, 1); --fulvous: hsla(32, 75%, 49%, 1); --orange-peel: hsla(34, 100%, 61%, 1); /* SCSS HEX */ $jet: #343330ff; $drab-dark-brown: #45462aff; $field-drab: #7e5920ff; $fulvous: #dc851fff; $orange-peel: #ffa737ff; /* SCSS HSL */ $jet: hsla(45, 4%, 20%, 1); $drab-dark-brown: hsla(62, 25%, 22%, 1); $field-drab: hsla(36, 59%, 31%, 1); $fulvous: hsla(32, 75%, 49%, 1); $orange-peel: hsla(34, 100%, 61%, 1); /* SCSS RGB */ $jet: rgba(52, 51, 48, 1); $drab-dark-brown: rgba(69, 70, 42, 1); $field-drab: rgba(126, 89, 32, 1); $fulvous: rgba(220, 133, 31, 1); $orange-peel: rgba(255, 167, 55, 1); /* SCSS Gradient */ $gradient-top: linear-gradient(0deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-right: linear-gradient(90deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-bottom: linear-gradient(180deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-left: linear-gradient(270deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-top-right: linear-gradient(45deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-bottom-right: linear-gradient(135deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-top-left: linear-gradient(225deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-bottom-left: linear-gradient(315deg, #343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff); $gradient-radial: radial-gradient(#343330ff, #45462aff, #7e5920ff, #dc851fff, #ffa737ff);

Try these examples: