Claromentis colour pallete is designed to be simple and accessible. It helps us create a consistent experience and helps to bridge the gap between product and marketing channels. The pallete can be used for the user interface as well as graphic assets like illustrations, animations and more.
The colour pallete consists of Semantic and Extended colours with Semantic colours having a specific intent. All the colours are designed to be complementary to each other.
Usage
Each colour consists of shades from 100 to 900.
UI Elements
Shades
Typical usage
100
Enabled hover & inactive elements background
200
Focused state outline (outside the boundaries) colour
300
Inactive elements border colour
400
Enabled elements border colour
500
Enabled elements hover border colour
600
Active state border and/or background & focused state border colour
700
800
Instances where high contrast is desired
900
Used as a substitute for black
Colour distribution
Shades mentioned earlier are picked from the following palletes for typical UI component usage.
In-product text is darker to emphasize readability and let user content stand out, while for our web and marketing channels text is lighter with greater variations to better reflect our branding.
WCAG Level AAA requires a contrast ratio of at least 7:1 for normal text (copy) and 4.5:1 for large text (headings with at least 18pt or 14pt for bold text 1). Colour swatches display if white/black text has sufficient colour contrast with the respective colour. When developing code - care must be taken to check for common contract issues.
User interface elements that are inactive, used only for decoration and text that is part of a logo have no contrast requirement 1.
Claromentis Brand
A
Fail
A
Fail
A
Fail
A
Pass
Nameblue-500
Hex#4499df
RGB68, 153, 223
CMYK70, 31, 0, 13
Semantic Colours
Intent
Colour
Description
Primary
Blue
Primary colour used to elevate UI elements from the rest, as well as the Claromentis brand
Secondary
Grey
Used for most of the UI elements or text that doesn't need to call attention
Success
Green
Indicates successful action
Danger
Red
Indicates danger or destructive action
Warning
Yellow
Indicates a warning
Colour significance may vary between cultures and regions 2. Care must be taken to take cultural differences into account.
Blue
blue-1
Hex#ebf8ff
RGB235, 248, 255
CMYK8, 3, 0, 0
blue-2
Hex#bfe3f7
RGB191, 227, 247
CMYK23, 8, 0, 3
blue-3
Hex#91cdf3
RGB145, 205, 243
CMYK40, 16, 0, 5
blue-4
Hex#65b3eb
RGB101, 179, 235
CMYK57, 24, 0, 8
blue-5
Hex#4499df
RGB68, 153, 223
CMYK70, 31, 0, 13
blue-6
Hex#3382cc
RGB51, 130, 204
CMYK75, 36, 0, 20
blue-7
Hex#2d6cae
RGB45, 108, 174
CMYK74, 38, 0, 32
blue-8
Hex#2e5280
RGB46, 82, 128
CMYK64, 36, 0, 50
blue-9
Hex#2c4363
RGB44, 67, 99
CMYK56, 32, 0, 61
Grey
grey-1
Hex#f7fafc
RGB247, 250, 252
CMYK2, 1, 0, 1
grey-2
Hex#edf2f7
RGB237, 242, 247
CMYK4, 2, 0, 3
grey-3
Hex#e2e8f0
RGB226, 232, 240
CMYK6, 3, 0, 6
grey-4
Hex#ccd5df
RGB204, 213, 223
CMYK9, 4, 0, 13
grey-5
Hex#909fb2
RGB144, 159, 178
CMYK19, 11, 0, 30
grey-6
Hex#70798a
RGB112, 121, 138
CMYK19, 12, 0, 46
grey-7
Hex#4c5566
RGB76, 85, 102
CMYK25, 17, 0, 60
grey-8
Hex#2e3747
RGB46, 55, 71
CMYK35, 23, 0, 72
grey-9
Hex#1a202c
RGB26, 32, 44
CMYK41, 27, 0, 83
Green
green-1
Hex#f0fff4
RGB240, 255, 244
CMYK6, 0, 4, 0
green-2
Hex#c7f5d5
RGB199, 245, 213
CMYK19, 0, 13, 4
green-3
Hex#9be5b4
RGB155, 229, 180
CMYK32, 0, 21, 10
green-4
Hex#6ad191
RGB106, 209, 145
CMYK49, 0, 31, 18
green-5
Hex#4ab978
RGB74, 185, 120
CMYK60, 0, 35, 27
green-6
Hex#3b9e69
RGB59, 158, 105
CMYK63, 0, 34, 38
green-7
Hex#31835a
RGB49, 131, 90
CMYK63, 0, 31, 49
green-8
Hex#286649
RGB40, 102, 73
CMYK61, 0, 28, 60
green-9
Hex#23533d
RGB35, 83, 61
CMYK58, 0, 27, 67
Red
red-1
Hex#fff5f5
RGB255, 245, 245
CMYK0, 4, 4, 0
red-2
Hex#fed7d7
RGB254, 215, 215
CMYK0, 15, 15, 0
red-3
Hex#fdb3b3
RGB253, 179, 179
CMYK0, 29, 29, 1
red-4
Hex#fa8383
RGB250, 131, 131
CMYK0, 48, 48, 2
red-5
Hex#f26868
RGB242, 104, 104
CMYK0, 57, 57, 5
red-6
Hex#e34040
RGB227, 64, 64
CMYK0, 72, 72, 11
red-7
Hex#c33232
RGB195, 50, 50
CMYK0, 74, 74, 24
red-8
Hex#732b2b
RGB115, 43, 43
CMYK0, 63, 63, 55
red-9
Hex#992e2e
RGB153, 46, 46
CMYK0, 70, 70, 40
Yellow
yellow-1
Hex#fffff0
RGB255, 255, 240
CMYK0, 0, 6, 0
yellow-2
Hex#fafdcf
RGB250, 253, 207
CMYK1, 0, 18, 1
yellow-3
Hex#f8ee71
RGB248, 238, 113
CMYK0, 4, 54, 3
yellow-4
Hex#ffd944
RGB255, 217, 68
CMYK0, 15, 73, 0
yellow-5
Hex#e8c453
RGB232, 196, 83
CMYK0, 16, 64, 9
yellow-6
Hex#c69c2c
RGB198, 156, 44
CMYK0, 21, 78, 22
yellow-7
Hex#bc8932
RGB188, 137, 50
CMYK0, 27, 73, 26
yellow-8
Hex#965a17
RGB150, 90, 23
CMYK0, 40, 85, 41
yellow-9
Hex#734211
RGB115, 66, 17
CMYK0, 43, 85, 55
Extended Colours
Extended colours are used for marketing, user-generated content or theming.
