Jotform color palette
SaaSJotform's color identity centers on a vibrant orange paired with deep neutrals and supporting accent hues, reflecting its approachable and modern SaaS platform. The palette is designed for clarity, accessibility, and brand recognition across digital experiences.
jotform.comJotform colors
Click any swatch to copy its hex. Hover for RGB and HSL.
Brand colors
The colors people recognise.- Jotform OrangePrimary242, 124, 30
- Jotform CharcoalSecondary50, 50, 50
- Jotform IndigoAccent92, 107, 192
Surfaces
Page, cards and dividers.- Jotform WhiteBackground255, 255, 255
- Jotform Light GraySurface247, 247, 248
- Jotform Border GrayBorder224, 224, 224
Text
Three tiers of copy.- Jotform BlackText35, 35, 35
- Jotform Medium GraySecondary text117, 117, 117
- Jotform Muted GrayMuted text189, 189, 189
Semantic
Feedback and state colors.- Jotform GreenSuccess67, 160, 71
- Jotform AmberWarning255, 160, 0
- Jotform RedError229, 57, 53
- Jotform BlueInfo3, 155, 229
Use Jotform's colors in your project
Pick a format, copy or download. Everything below is generated from the exact hex values above.
jotform-palette-colors.css · Paste into your global stylesheet.
:root {
--info: #039BE5;
--error: #E53935;
--accent: #5C6BC0;
--border: #E0E0E0;
--primary: #F27C1E;
--success: #43A047;
--surface: #F7F7F8;
--warning: #FFA000;
--secondary: #323232;
--text-muted: #BDBDBD;
--background: #FFFFFF;
--text-primary: #232323;
--text-secondary: #757575;
}Contrast and accessibility
Every text tone tested against every surface, per WCAG 2.1.
Text on background
Needs 4.5:1 for body text
15.7:1
Pass
Text on surface
Needs 4.5:1 for body text
14.7:1
Pass
Secondary text on background
Needs 4.5:1 for body text
4.6:1
Pass
Secondary text on surface
Needs 4.5:1 for body text
4.3:1
Fail
Muted text on background
Needs 3:1 for large text
1.9:1
Fail
Muted text on surface
Needs 3:1 for large text
1.8:1
Fail
Jotform gray and neutral colors
The quiet part of the Jotform palette: page background, card surfaces, dividers and the three text tones that sit on them. Click a value to copy it.
- Jotform WhiteBackground
- HEX
- RGB
- HSL
- Jotform Light GraySurface
- HEX
- RGB
- HSL
- Jotform Border GrayBorder
- HEX
- RGB
- HSL
- Jotform BlackText
- HEX
- RGB
- HSL
- Jotform Medium GraySecondary text
- HEX
- RGB
- HSL
- Jotform Muted GrayMuted text
- HEX
- RGB
- HSL
About Jotform's colors
Jotform's palette is built around a bold orange primary, balanced by deep neutrals and functional accent colors for clarity and accessibility. The system supports a clean, modern UI with strong visual hierarchy.
Primary orange contrasts with dark charcoal for emphasis.
Accent indigo is used for highlights and links.
Neutrals provide structure and readability.
Psychology
The orange conveys energy, friendliness, and approachability, while the charcoal and grays ground the interface in professionalism. Accent colors add vibrancy without overwhelming the user.
Evolution
Jotform's color palette has remained stable, with orange as the core identity since early versions. Minor adjustments to neutrals and accent colors have improved accessibility and digital clarity.
Where Jotform uses each color
- Primary
Used for main action buttons, highlights, and the Jotform logo.
- Secondary
Appears in navigation bars, footers, and UI backgrounds.
- Accent
Used for links, icons, and selected states in the interface.
- Backgrounds
White and light gray are used for main app and form backgrounds.
- Text
Primary black and medium gray are used for headings and body text.
- Semantic
Green, amber, red, and blue are used for status indicators, alerts, and feedback messages.
Jotform color questions
Hex codes, RGB values, neutrals and how to use the palette.
The official Jotform brand color is Jotform Orange, with hex code #F27C1E.
Jotform Orange is #F27C1E, which is RGB(242, 124, 30). For CMYK, use approximately 0, 49, 88, 5.
Jotform uses a range of grays including Jotform Charcoal (#323232), Medium Gray (#757575), and Muted Gray (#BDBDBD) for UI structure and text.
Use Jotform Orange (#F27C1E) for primary actions and highlights, with neutrals for backgrounds and text. Accent and semantic colors are reserved for links, icons, and status messaging.
The secondary color is Jotform Charcoal, #323232, and the accent is Jotform Indigo, #5C6BC0. Together with the primary they make up the three brand colors at the top of this page.
3 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 Jotform's colors consistently when it generates UI.
Make something in the spirit of Jotform
Start from this palette's mood and get an original 13-color system for your own project, contrast-checked and ready to export.