E-commerce & Payments
JCB Color Codes
JCB's mark carries three colors, a blue near hex #0B4EA2, a red near #A6093D and a green near #007940, on three linked shapes. The JCB color codes in Hex, RGB and CMYK can be found below. The Tokyo company was founded in 1961 as Japan Credit Bureau, the country's second card issuer, by Sanwa Bank and Nippon Shinpan. Its counterpart among older card networks is Diners Club.
Primary colors
What are JCB Primary Colors?
JCB's primary colors are blue #0B4EA2, red #A6093D, green #007940.
JCB publishes no open hex sheet; these are measured from the current mark.
JCB Blue
| Hex | #0B4EA2 |
|---|---|
| RGB | 11, 78, 162 |
| HSL | hsl(213, 87%, 34%) |
| CMYK | 93%, 52%, 0%, 36%converted · approximate |
| Pantone | PMS 2945 Cnearest match · not published by the brand |
JCB Red
| Hex | #A6093D |
|---|---|
| RGB | 166, 9, 61 |
| HSL | hsl(340, 90%, 34%) |
| CMYK | 0%, 95%, 63%, 35%converted · approximate |
| Pantone | PMS 215 Cnearest match · not published by the brand |
JCB Green
| Hex | #007940 |
|---|---|
| RGB | 0, 121, 64 |
| HSL | hsl(152, 100%, 24%) |
| CMYK | 100%, 0%, 47%, 53%converted · approximate |
| Pantone | PMS 356 Cnearest match · not published by the brand |
JCB Hex Color Codes
JCB hex color codes are #0B4EA2 for blue, #A6093D for red and #007940 for green.
| Color | Hex |
|---|---|
| Blue | #0B4EA2 |
| Red | #A6093D |
| Green | #007940 |
JCB RGB Color Codes
JCB RGB color codes are 11, 78, 162 for blue, 166, 9, 61 for red and 0, 121, 64 for green. Reach for RGB when a tool wants channel numbers or a CSS alpha value.
| Color | RGB |
|---|---|
| Blue | rgb(11, 78, 162) |
| Red | rgb(166, 9, 61) |
| Green | rgb(0, 121, 64) |
JCB HSL Color Codes
JCB HSL color codes are 213, 87%, 34% for blue, 340, 90%, 34% for red and 152, 100%, 24% for green. Change the third value for a lighter or darker version without moving the hue.
| Color | HSL |
|---|---|
| Blue | hsl(213, 87%, 34%) |
| Red | hsl(340, 90%, 34%) |
| Green | hsl(152, 100%, 24%) |
JCB CMYK Color Code
JCB CMYK color codes are conversions from the hex, because the brand publishes none. Check a printed proof before a full run.
| Color | CMYK |
|---|---|
| Blue | 93%, 52%, 0%, 36% |
| Red | 0%, 95%, 63%, 35% |
| Green | 100%, 0%, 47%, 53% |
JCB Pantone Color Codes
JCB Pantone color codes are nearest matches by color distance, not brand specs. The table shows the closest swatch for every color.
| Color | Nearest Pantone |
|---|---|
| Blue | PMS 2945 C |
| Red | PMS 215 C |
| Green | PMS 356 C |
Logo
JCB Logo Colors
JCB logo colors are blue, red and green, one per shape in the mark.
JCB Logo Colors Palette
What the JCB Logo Colors Mean?
The JCB logo colors were taken from three signboards. Each color stands for one of the companies tied to JCB early on, blue, red and green being the house colors of those firms. The company now also reads the three as Support, Strength and Sharing, a meaning added later rather than the origin.
JCB Logo Color History
JCB logo color history keeps the blue, red and green from the mark's early years. The shapes were tidied into the current three-part form over time, and monotone and foil versions were added for cards where full color does not print well.
JCB Logo Fonts
JCB logo fonts are a custom sans for the letters, not for sale. A bold grotesque covers it.
JCB Logo JPG
JCB logo in JPG. No transparency, so it is flattened onto white. Safe for documents and slide decks.
JCB Logo PNG
JCB logo in PNG, with a transparent background. Use it over a colored surface.
JCB Logo WebP
JCB logo in WebP. Same transparency as the PNG at about a third of the file size.
JCB Color Code Shades
JCB color code shades step evenly from the primary toward black, for hover states, borders and shadows.
These are interface steps, not JCB paint or trim names.
In code
Using the JCB palette
CSS custom properties
:root {
--jcb-blue: #0B4EA2;
--jcb-red: #A6093D;
--jcb-green: #007940;
}Contrast against white
| Blue | 8.00:1AA ✓ |
|---|---|
| Red | 7.70:1AA ✓ |
| Green | 5.51:1AA ✓ |
Brand colors are chosen for recognition, not for legibility. A failing value here is normal. It means use it as a fill, not as text.