skills.rest
pascalandy
pascalandyCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

color-palette-frappe

Provide Catppuccin Frappé hex and rgba values for diagrams and UI.

Updated Aug 23, 2026
Search Tags:#design#mermaid#hex#colors#palette#rgba#color-reference
One-click install
npx skills add https://github.com/pascalandy/dotfiles --skill color-palette-frappe
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: color-palette-frappe
Source: https://github.com/pascalandy/dotfiles/tree/main/dot_config/opencode/skill/std-color-palette-frappe
Command: npx skills add https://github.com/pascalandy/dotfiles --skill color-palette-frappe

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill provides a ready-made Catppuccin Frappé color palette to ensure consistent visual styling across diagrams, UI components, and documentation.

Core Features & Use Cases

  • Provides hex and rgba values for Accent, Text, Overlay, Surface, and Base groups following Catppuccin Frappé specs.
  • Suitable for Mermaid diagrams, charts, dashboards, and design docs requiring coherent color references.
  • Example: apply Rosewater for highlights and Base surfaces for backgrounds to improve readability.

Quick Start

Refer to the listed hex and rgba values and apply them to your visuals (e.g., Mermaid diagrams, UI themes, and documentation) to maintain a cohesive color system.

Frequently Asked Questions about color-palette-frappe

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
What are the exact Catppuccin Frappé hex and rgba values for diagrams?▼

The Catppuccin Frappé palette provides exact hex and rgba values for Accent, Text, Overlay, Surface, and Base color groups to ensure consistent visual styling across Mermaid diagrams and documentation.

How do I apply Catppuccin Frappé colors to Mermaid diagrams?▼

To apply Catppuccin Frappé colors to Mermaid diagrams, reference the provided hex and rgba values for groups like Rosewater for highlights and Base surfaces for backgrounds to maintain a coherent color system.

Can I use this Catppuccin Frappé palette for UI dashboards and charts?▼

Yes, the Catppuccin Frappé palette is suitable for UI dashboards, charts, and design docs, providing precise color references for Accent, Text, Overlay, Surface, and Base groups to improve readability.

Does this color palette include both hex and rgba formats?▼

Yes, the color palette includes both hex and rgba formats for Accent, Text, Overlay, Surface, and Base groups, ensuring flexibility when applying Catppuccin Frappé specifications to visuals.

What's the best way to maintain consistent colors across design documentation?▼

Using a ready-made Catppuccin Frappé color palette with exact hex and rgba values ensures consistent visual styling and coherent color references across diagrams, UI components, and documentation.

Why use Catppuccin Frappé specifications instead of custom colors for diagrams?▼

Catppuccin Frappé specifications provide a predefined, coherent color system with exact hex and rgba values for Surface and Accent groups, eliminating manual color picking and ensuring visual consistency.

Related Skills

Explore More Design & Creative Skills→
dsm5edsm5e
129

higgsfield-moodboard

Create unified visual style direction from reference images and curated presets.

Community
Intermediate
joaquimscostajoaquimscosta
21

diagramming

Create and edit Mermaid diagrams for processes, architectures, and workflows.

Community
Basic
Avihai-HAvihai-H

mermaid

Generate Mermaid diagrams inline within markdown documents.

Community
Intermediate
RuanBuitendag42RuanBuitendag42

catppuccin-theming

Harmonizes the Catppuccin Macchiato palette across Hyprland, Kitty, Waybar, Neovim, Tmux and related apps.

Community
Intermediate