← Oyster Shell
Light Umber →

Muted Mushroom - #B6AFA3 - Color Chart : Shades, Tints & More

RGB Value:
CMYK Value:
HSV Value:
HSL Value:

1. Background Colors

Set background colors for elements using the background-color property.

Black Backgroud With #B6AFA3

#B6AFA3

.bg {
    background-color: #B6AFA3;
}
White Backgroud With #B6AFA3

#B6AFA3

.bg {
    background-color: #B6AFA3;
}

2. Text Colors - Typography

Change text color using the color property.

Heading (H1-H6)

Color Bold H1

h1 {
    color: #B6AFA3;
}

Color Bold H2

h2 {
    color: #B6AFA3;
}

Color Bold H3

h3 {
    color: #B6AFA3;
}

Color Bold H4

h4 {
    color: #B6AFA3;
}
Color Bold H5
h5 {
    color: #B6AFA3;
}
Color Bold H6
h6 {
    color: #B6AFA3;
}

Paragraph

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 

p {
    color: #B6AFA3;
}

Blockquote

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." – Anonymous
blockquote {
    color: #B6AFA3;
}

Link

For more, visit colorbold. 

a {
    color: #B6AFA3;
}

3. Border Colors

Apply colors to borders using the border property.

Solid
.box-solid {
  border: 5px solid #B6AFA3; 
  padding: 20px;
}
Dotted
.box-dotted {
  border: 5px dotted #B6AFA3; 
  padding: 20px;
}
Dashed
.box-dashed {
  border: 5px dashed #B6AFA3; 
  padding: 20px;
}
Double
.box-double {
  border: 5px double #B6AFA3; 
  padding: 20px;
}
Groove
.box-groove {
  border: 5px groove #B6AFA3; 
  padding: 20px;
}
Ridge
.box-ridge {
  border: 5px ridge #B6AFA3; 
  padding: 20px;
}
Inset
.box-inset {
  border: 5px inset #B6AFA3; 
  padding: 20px;
}
Outset
.box-outset {
  border: 5px outset #B6AFA3; 
  padding: 20px;
}

4. Button Styling

Create colorful buttons by styling their background, text, and borders.

.themebutton {
 background-color: #B6AFA3;
 color:#fff;
 border-radius: 5px;
}
.themebutton {
 background-color: transparent;
 border: 2px solid #B6AFA3;
 color: #B6AFA3;
}
.themebutton {
 background-color: #B6AFA3; 
 box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
 transition: box-shadow 0.3s ease, transform 0.3s ease, background-color 0.2s ease;
}

Card Component Preview

Card Title

This is a card with a border in the primary color.

Card Title

This is a card with a border in the primary color.

Card Title

This is a card with a border in the primary color.