Loom color palette
SaaSLoom's color system features a distinctive purple as its primary brand color, supported by a palette of soft neutrals and vibrant accents. The palette is designed for clarity, accessibility, and a modern SaaS experience.
loom.comLoom colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Loom PurplePrimary98, 93, 245
- Loom CoralSecondary255, 92, 92
- Loom GoldAccent255, 180, 67
Surfaces
Page, cards and dividers.- Loom WhiteBackground255, 255, 255
- Loom Light GraySurface247, 248, 250
- Loom Border GrayBorder229, 231, 235
Text
Three tiers of copy.- Loom BlackText26, 26, 26
- Loom Dark GraySecondary text91, 91, 91
- Loom Muted GrayMuted text156, 163, 175
Semantic
Feedback and state colors.- Loom GreenSuccess34, 197, 94
- Loom GoldWarning255, 180, 67
- Loom CoralError255, 92, 92
- Loom BlueInfo59, 130, 246
Use Loom's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
loom-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #3B82F6;
--error: #FF5C5C;
--accent: #FFB443;
--border: #E5E7EB;
--primary: #625DF5;
--success: #22C55E;
--surface: #F7F8FA;
--warning: #FFB443;
--secondary: #FF5C5C;
--text-muted: #9CA3AF;
--background: #FFFFFF;
--text-primary: #1A1A1A;
--text-secondary: #5B5B5B;
}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.4:1
Pass
Secondary text on background
Needs 4.5:1 for body text
6.8:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
6.4:1
Pass
Muted text on background
Needs 3:1 for large text
2.5:1
Fail
Muted text on surface
Needs 3:1 for large text
2.4:1
Fail
Loom background, border and text colors
The quiet part of the Loom palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Loom WhiteBackground
- HEX
- RGB
- HSL
- Loom Light GraySurface
- HEX
- RGB
- HSL
- Loom Border GrayBorder
- HEX
- RGB
- HSL
- Loom BlackText
- HEX
- RGB
- HSL
- Loom Dark GraySecondary text
- HEX
- RGB
- HSL
- Loom Muted GrayMuted text
- HEX
- RGB
- HSL
About Loom's colors
Loom's palette is anchored by a bold purple, contrasted with warm accents and clean neutrals for clarity and accessibility. The color relationships support a friendly, modern SaaS interface.
Purple primary paired with coral and gold for visual interest.
Soft grays and white provide neutral backgrounds for content.
Accent colors highlight actions and notifications.
Psychology
Purple conveys creativity and approachability, supporting Loom's focus on communication. Warm accents add energy and draw attention to key UI elements.
Evolution
Loom's palette has remained consistent, with the purple primary established early in the brand's history. Minor adjustments to grays and accent colors have improved accessibility and visual balance.
Where Loom uses each color
- Primary
Used for main buttons, highlights, and the logo across the Loom app and marketing site.
- Secondary
Appears in alerts, notifications, and as an accent in illustrations.
- Accent
Used for highlights, badges, and to draw attention to key actions.
- Backgrounds
White and light gray backgrounds are used for app screens and content areas.
- Text
Black and dark gray are used for primary and secondary text throughout the interface.
- Semantic
Green, gold, and coral are used for success, warning, and error states respectively in UI feedback.
Loom color questions
Hex codes, RGB values, neutrals and how to use the palette.
The Loom primary color is Loom Purple, with the hex code #625DF5. This is used for main branding and key UI elements.
Loom Purple (#625DF5) in RGB is (98, 93, 245). For CMYK, it is approximately (60, 62, 0, 4).
Loom uses Loom Light Gray (#F7F8FA), Loom Border Gray (#E5E7EB), Loom Dark Gray (#5B5B5B), and Loom Muted Gray (#9CA3AF) for backgrounds, borders, and muted text. These ensure clarity and accessibility across the app.
Use Loom Purple (#625DF5) for primary actions and branding, with Loom Coral (#FF5C5C) and Loom Gold (#FFB443) for accents and semantic states. Neutrals provide structure and readability in backgrounds and text.
The secondary color is Loom Coral, #FF5C5C, and the accent is Loom Gold, #FFB443. Together with the primary they make up the three brand colors at the top of this page.
4 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 Loom's colors consistently when it generates UI.
Make something in the spirit of Loom
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.