Huehive Logo

HueHive

Base2tone But With Three Main Colors From Catppuccin Macchiato

166 views
Latte #D8CBAE
Latte Light #E6D9C3
Latte Dark #C7B49A
Latte Muted #D1BA9D
Latte Soft #F2E8D5
Latte Deep #A69E7E
Macchiato #C3B091
Macchiato Light #D6C6B4
Macchiato Dark #AFA68A
Macchiato Soft #E5D8C0
Macchiato Deep #8E7B61
Mocha #8C6A4F
Mocha Light #BFAFA4
Mocha Dark #6E4D3E
Mocha Muted #7B5A44
Mocha Soft #D3C0B1
Mocha Deep #5C3F2A
Frappe #F5E3C0
Frappe Dark #E7D1B4
Frappe Muted #E0D1B9
Frappe Soft #F9F1E5
Frappe Deep #D8C2A4
Chocolate #3D2A26
Chocolate Light #5C4A44
Chocolate Dark #2B1D1A
Chocolate Muted #4A3A36
Chocolate Soft #7A5E55
Coffee Diva #B6A68C
Dwindling Dandelion #F7E6D5
Havana #3F2E2B
#D8CBAE Latte
#E6D9C3 Latte Light
#C7B49A Latte Dark
#D1BA9D Latte Muted
#F2E8D5 Latte Soft
#A69E7E Latte Deep
#C3B091 Macchiato
#D6C6B4 Macchiato Light
#AFA68A Macchiato Dark
#E5D8C0 Macchiato Soft
#8E7B61 Macchiato Deep
#8C6A4F Mocha
#BFAFA4 Mocha Light
#6E4D3E Mocha Dark
#7B5A44 Mocha Muted
#D3C0B1 Mocha Soft
#5C3F2A Mocha Deep
#F5E3C0 Frappe
#E7D1B4 Frappe Dark
#E0D1B9 Frappe Muted
#F9F1E5 Frappe Soft
#D8C2A4 Frappe Deep
#3D2A26 Chocolate
#5C4A44 Chocolate Light
#2B1D1A Chocolate Dark
#4A3A36 Chocolate Muted
#7A5E55 Chocolate Soft
#B6A68C Coffee Diva
#F7E6D5 Dwindling Dandelion
#3F2E2B Havana

Base2tone but with three main colors from Catppuccin Macchiato

About This Color Palette

 <Catppuccin Macchiato Base2tone Palette>
1. Latte - 
          
          #D8CBAE
        - A warm beige that evokes comfort and tranquility.
2. Latte Light - 
          
          #E6D9C3
        - A lighter shade for highlights and backgrounds.
3. Latte Dark - 
          
          #C7B49A
        - A darker shade for depth and contrast.
4. Latte Muted - 
          
          #D1BA9D
        - A soft muted tone for subtle accents.
5. Latte Soft - 
          
          #F2E8D5
        - A creamy variant that adds brightness.
6. Latte Deep - 
          
          #A69E7E
        - A rich version for more profound elements.
7. Macchiato - 
          
          #C3B091
        - A muted brown that conveys calmness and reliability.
8. Macchiato Light - 
          
          #D6C6B4
        - A lighter shade for gentle contrasts.
9. Macchiato Dark - 
          
          #AFA68A
        - A deeper hue for stronger emphasis.
10. Macchiato Muted - 
          
          #B6A68C
        - A soft variant for understated accents.
11. Macchiato Soft - 
          
          #E5D8C0
        - A creamy tone that lightens the palette.
12. Macchiato Deep - 
          
          #8E7B61
        - A rich brown perfect for grounding.
13. Mocha - 
          
          #8C6A4F
        - A deep brown that instills sophistication and warmth.
14. Mocha Light - 
          
          #BFAFA4
        - A lighter variant for airy designs.
15. Mocha Dark - 
          
          #6E4D3E
        - A darker shade for strong statements.
16. Mocha Muted - 
          
          #7B5A44
        - A soft tone for subtle details.
17. Mocha Soft - 
          
          #D3C0B1
        - A light, creamy version for balance.
18. Mocha Deep - 
          
          #5C3F2A
        - A rich, earthy tone adding depth.
19. Frappe - 
          
          #F5E3C0
        - A gentle off-white symbolizing purity and simplicity.
20. Frappe Light - 
          
          #F7E6D5
        - A lighter version for highlights and accents.
21. Frappe Dark - 
          
          #E7D1B4
        - A deeper shade for contrast.
22. Frappe Muted - 
          
          #E0D1B9
        - A soft muted tone for subtle backgrounds.
23. Frappe Soft - 
          
          #F9F1E5
        - A very light tone that enhances brightness.
24. Frappe Deep - 
          
          #D8C2A4
        - A rich variant for more profound elements.
25. Chocolate - 
          
          #3D2A26
        - A dark brown that signifies strength and stability.
26. Chocolate Light - 
          
          #5C4A44
        - A lighter shade for highlights.
27. Chocolate Dark - 
          
          #2B1D1A
        - A deeper hue for strong emphasis.
28. Chocolate Muted - 
          
          #4A3A36
        - A soft variant for understated accents.
29. Chocolate Soft - 
          
          #7A5E55
        - A creamy tone that lightens the palette.
30. Chocolate Deep - 
          
          #3F2E2B
        - A rich, earthy tone adding depth.

Description:

This Catppuccin Macchiato Base2tone Palette expands on the original three main colors, incorporating 16 shades for each to provide a comprehensive range for design applications. The palette fosters an inviting, cozy atmosphere while allowing for flexibility and variety in design elements. The lighter shades are perfect for backgrounds and highlights, while the deeper tones add contrast and depth.

Follow-up Questions:

  1. What are the primary design elements you want to focus on with this palette (e.g., typography, backgrounds, buttons)?
  2. Are there any specific design styles or themes you’d like to align with this color palette (e.g., modern, vintage, minimalist)?
  3. Do you need guidance on how to effectively use these colors in your design?

Customize Preview Colors

Upgrade to Pro
C
Croma
Dashboard
Analytics
Customers
Settings
John Doe
Admin
Search...

Overview

Welcome back, here's what's happening today.

+12%
$45,231
Total Revenue
+12%
2,345
Active Users
+12%
128
New Orders

Revenue Growth

Brand
Features Pricing About

Build something amazing

Create stunning designs with our AI-powered color palette generator. Perfect for web, mobile, and print.

Fast Performance

Optimized for speed and efficiency.

Secure by Default

Enterprise-grade security built-in.

Easy to Use

Intuitive interface for everyone.

9:41

Good Morning

Here's your daily update

Today

Design Review
10:00 AM
Team Meeting
11:30 AM
Lunch Break
1:00 PM
Project Focus
2:00 PM
Home
Search
Profile
B
BrandName
Sponsored
...
New Collection

Summer
Sale

Get up to 50% off on all items.

1,234 likes
BrandName Don't miss out on our biggest sale of the season! #summersale #fashion

Logo Variations

B
BrandName
B
BrandName

Business Card

B
BrandName

John Doe

Creative Director

john.doe@brandname.com

+1 (555) 123-4567

www.brandname.com

Type Scale

Heading 1

Bold / 48px

Heading 2

Bold / 36px

Heading 3

Bold / 30px

Heading 4

Bold / 24px

Body text. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Regular / 16px

Article Layout

Design Trends

The Future of Color

Color trends are evolving rapidly. We are seeing a shift towards more vibrant, expressive palettes that capture attention and evoke emotion.

"Color is a power which directly influences the soul."

Why it matters

Choosing the right color palette is crucial for brand identity. It communicates values without words and creates an instant connection with the audience.

Abstract

Composition #01

Download Files

PNG Image

Raster image format

Copy Code

variables.css

          

Simulate how your palette appears to users with different types of color vision deficiencies. Approximately 8% of men and 0.5% of women have some form of color blindness.

Original Palette

Protanopia

Red-blind (approx. 1% of men)

Deuteranopia

Green-blind (approx. 1% of men)

Tritanopia

Blue-blind (very rare)

Achromatopsia

Total color blindness (monochromacy)

Shades & Tints

Explore lighter variations (tints) and darker variations (shades) of each color. Click any color to copy its hex code.

Latte

#D8CBAE

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Latte Light

#E6D9C3

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Latte Dark

#C7B49A

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Latte Muted

#D1BA9D

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Latte Soft

#F2E8D5

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Latte Deep

#A69E7E

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Macchiato

#C3B091

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Macchiato Light

#D6C6B4

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Macchiato Dark

#AFA68A

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Macchiato Soft

#E5D8C0

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Macchiato Deep

#8E7B61

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Mocha

#8C6A4F

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Mocha Light

#BFAFA4

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Mocha Dark

#6E4D3E

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Mocha Muted

#7B5A44

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Mocha Soft

#D3C0B1

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Mocha Deep

#5C3F2A

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Frappe

#F5E3C0

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Frappe Dark

#E7D1B4

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Frappe Muted

#E0D1B9

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Frappe Soft

#F9F1E5

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Frappe Deep

#D8C2A4

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Chocolate

#3D2A26

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Chocolate Light

#5C4A44

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Chocolate Dark

#2B1D1A

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Chocolate Muted

#4A3A36

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Chocolate Soft

#7A5E55

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Coffee Diva

#B6A68C

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Dwindling Dandelion

#F7E6D5

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Havana

#3F2E2B

Tints

(Mixed with white - lighter)

Original

Shades

(Mixed with black - darker)

Color Theory Analysis

Unlock advanced color wheel distribution, harmony detection, and HSL color analysis with Pro.

Upgrade to Pro

Color Wheel Distribution

Harmony Analysis

Dominant Temperature

--

Harmony Type

--

Analyzing color relationships...

Color Values (HSL)

Select Background

Select Text Color

Contrast Analysis

Aa

The quick brown fox jumps over the lazy dog.

Contrast Ratio --

Normal Text

WCAG AA --
WCAG AAA --

Large Text

WCAG AA --
WCAG AAA --

Understanding WCAG Scores

Normal Text

  • AA requires 4.5:1 ratio
  • AAA requires 7.0:1 ratio

Large Text (18pt+ or 14pt+ bold)

  • AA requires 3.0:1 ratio
  • AAA requires 4.5:1 ratio

What would you like to do?

Other Similar Palettes

#FF8C00
#FFA500
#FFFACD
#FFEFD5
#FFFCDC
#FFFDD0
#66CDAA
#98FB98
#FF8C00
#FFA500
#FFFACD
#FFEFD5
#FFFDD0
#FAFAD2
#3CB371
#20B2AA
#FFB74D
#FFA726
#FFF176
#FFEB3B
#FBC02D
#F9A825
#A5D6A7
#66BB6A
#D8CBAE
#C3B091
#8C6A4F
#F5E3C0
#3D2A26
#402926
#331D1B
#251312
#6E4F4B
#050404
#040202
#5F413F
#503531
#2B1616
#190C0C
#1F0F0F
#140A0A
#0A0606
#0F0808
#020000
#030101

Update Your Palette

Current Palette

Latte
Latte Light
Latte Dark
Latte Muted
Latte Soft
Latte Deep
Macchiato
Macchiato Light
Macchiato Dark
Macchiato Soft
Macchiato Deep
Mocha
Mocha Light
Mocha Dark
Mocha Muted
Mocha Soft
Mocha Deep
Frappe
Frappe Dark
Frappe Muted
Frappe Soft
Frappe Deep
Chocolate
Chocolate Light
Chocolate Dark
Chocolate Muted
Chocolate Soft
Coffee Diva
Dwindling Dandelion
Havana

Base2tone but with three main colors from Catppuccin Macchiato

Try these examples:

New to HueHive? 🎨

Discover AI-powered color tools