/* 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);
Palette Description
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.