Calendly color palette
SaaSCalendly's color system is centered around a vibrant blue primary, complemented by cool neutrals and subtle accents for a clean, modern SaaS interface. The palette emphasizes clarity, accessibility, and a professional digital experience.
calendly.comCalendly colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Calendly BluePrimary0, 107, 255
- Calendly CharcoalSecondary26, 26, 26
- Calendly TealAccent0, 194, 183
Surfaces
Page, cards and dividers.- Calendly WhiteBackground255, 255, 255
- Calendly SurfaceSurface247, 249, 251
- Calendly Border GrayBorder229, 234, 240
Text
Three tiers of copy.- Calendly CharcoalText26, 26, 26
- Calendly SlateSecondary text107, 122, 144
- Calendly Muted GrayMuted text163, 176, 194
Semantic
Feedback and state colors.- Calendly Success GreenSuccess0, 182, 122
- Calendly Warning YellowWarning255, 184, 0
- Calendly Error RedError255, 59, 48
- Calendly BlueInfo0, 107, 255
Use Calendly's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
calendly-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #006BFF;
--error: #FF3B30;
--accent: #00C2B7;
--border: #E5EAF0;
--primary: #006BFF;
--success: #00B67A;
--surface: #F7F9FB;
--warning: #FFB800;
--secondary: #1A1A1A;
--text-muted: #A3B0C2;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #6B7A90;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
17.4:1
Pass
Text on surface
Needs 4.5:1 for body text
16.5:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.4:1
Fail
Secondary text on surface
Needs 4.5:1 for body text
4.1:1
Fail
Muted text on background
Needs 3:1 for large text
2.2:1
Fail
Muted text on surface
Needs 3:1 for large text
2.1:1
Fail
Calendly background, border and text colors
The quiet part of the Calendly palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Calendly WhiteBackground
- HEX
- RGB
- HSL
- Calendly SurfaceSurface
- HEX
- RGB
- HSL
- Calendly Border GrayBorder
- HEX
- RGB
- HSL
- Calendly CharcoalText
- HEX
- RGB
- HSL
- Calendly SlateSecondary text
- HEX
- RGB
- HSL
- Calendly Muted GrayMuted text
- HEX
- RGB
- HSL
About Calendly's colors
Calendly's palette uses a bold blue as its anchor, supported by neutral grays and subtle accent colors for clarity and usability. The system is designed for digital interfaces, emphasizing accessibility and professionalism.
Primary blue is paired with neutral backgrounds for contrast.
Accent teal highlights interactive elements.
Grays provide structure and hierarchy in UI components.
Psychology
The blue primary conveys trust, reliability, and approachability, key traits for scheduling software. Neutral tones support a calm, focused user experience.
Evolution
Calendly's palette has remained stable, with the blue primary consistently at the forefront. Minor adjustments to neutrals and accent colors have improved accessibility and modernized the interface.
Where Calendly uses each color
- Primary
Used for main action buttons, links, and key highlights across the app and marketing site.
- Secondary
Appears in navigation bars, footers, and as the main text color.
- Accent
Highlights interactive elements like toggles, icons, and notifications.
- Backgrounds
White and light gray backgrounds are used for app screens and modal surfaces.
- Text
Charcoal and slate grays are used for primary and secondary text throughout the UI.
- Semantic
Green, yellow, and red are used for success, warning, and error states in forms and notifications.
Calendly color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Calendly primary color is #006BFF, known as Calendly Blue.
Calendly Blue (#006BFF) is RGB(0, 107, 255) and CMYK(100, 58, 0, 0).
Calendly uses #1A1A1A (Calendly Charcoal), #6B7A90 (Calendly Slate), #A3B0C2 (Calendly Muted Gray), and #E5EAF0 (Calendly Border Gray) for its neutral palette.
Use #006BFF for primary actions, neutrals for backgrounds and text, and accent or semantic colors for highlights and status indicators. Always maintain sufficient contrast for accessibility.
The secondary color is Calendly Charcoal, #1A1A1A, and the accent is Calendly Teal, #00C2B7. Together with the primary they make up the three brand colors at the top of this page.
2 of 6 text and background pairings meet WCAG 2.1 AA contrast. The contrast section above shows every pairing with its exact ratio.
Use the export block on this page. It gives you CSS custom properties, a Tailwind config, W3C design tokens or a shadcn/ui theme built from these exact hex values, with copy and download buttons.
Yes. Export the Claude Code skill, Cursor rules or Codex prompt from the same block. The agent then applies Calendly's colors consistently when it generates UI.
Make something in the spirit of Calendly
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.