Color Palette
The color palette reflects the fresh, friendly, and nourishing character of Little Lunches. Deep navy and teal establish trust and clarity, warm sand and amber add approachability, and clean neutrals ensure balance across all interfaces.
Text Colors
The text colour palette ensures clear typographic hierarchy across all surfaces of the Little Lunches interface. Each colour is carefully selected to maintain readability and accessibility in both light and dark contexts.
White
HEX
#FFFFFF
RGB
255, 255, 255
HSL
0, 0, 100
CMYK
0, 0, 0, 0
Grey-50
HEX
#778D96
RGB
119, 141, 150
HSL
197, 13, 53
CMYK
57, 36, 35, 3
Blue-20
HEX
#113747
RGB
17, 55, 71
HSL
198, 61, 17
CMYK
93, 68, 51, 46
Blue-30
HEX
#246986
RGB
36, 105, 134
HSL
198, 58, 33
CMYK
87, 51, 32, 9
Icon Colors
Icon colours are defined to maintain visual consistency and clarity across all interactive elements. They range from neutral tones for inactive states to brand accents for highlighted and active interactions.
White
HEX
#FFFFFF
RGB
255, 255, 255
HSL
0, 0, 100
CMYK
0, 0, 0, 0
Grey-50
HEX
#778D96
RGB
119, 141, 150
HSL
197, 13, 53
CMYK
57, 36, 35, 3
Blue-20
HEX
#113747
RGB
17, 55, 71
HSL
198, 61, 17
CMYK
93, 68, 51, 46
Blue-30
HEX
#246986
RGB
36, 105, 134
HSL
198, 58, 33
CMYK
87, 51, 32, 9
Green
HEX
#8FDADC
RGB
143, 218, 220
HSL
182, 52, 71
CMYK
41, 0, 16, 0
Yellow-85
HEX
#FBE0AD
RGB
251, 224, 173
HSL
39, 91, 83
CMYK
1, 11, 36, 0
Background Colors
Background colours establish the layered visual structure of the Little Lunches interface, from clean white surfaces to rich brand-tinted sections. Each tone is chosen to support content hierarchy and create a warm, approachable atmosphere across the app and website.
White
HEX
#FFFFFF
RGB
255, 255, 255
HSL
0, 0, 100
CMYK
0, 0, 0, 0
Grey-98
HEX
#FAFAFB
RGB
250, 250, 251
HSL
240, 11, 98
CMYK
1, 1, 0, 0
Grey-95
HEX
#EFF0F2
RGB
239, 240, 242
HSL
220, 10, 94
CMYK
5, 3, 2, 0
Blue-95
HEX
#EEF9FA
RGB
238, 249, 250
HSL
185, 55, 96
CMYK
5, 0, 2, 0
Green-95
HEX
#EDFBF2
RGB
237, 251, 242
HSL
141, 64, 96
CMYK
6, 0, 5, 0
Yellow-85
HEX
#FBE0AD
RGB
251, 224, 173
HSL
39, 91, 83
CMYK
1, 11, 36, 0
Yellow-65
HEX
#F9BD58
RGB
249, 189, 88
HSL
38, 93, 66
CMYK
2, 28, 76, 0
Blue-70
HEX
#8FDADC
RGB
143, 218, 220
HSL
182, 52, 71
CMYK
41, 0, 16, 0
Blue-20
HEX
#113747
RGB
17, 55, 71
HSL
198, 61, 17
CMYK
93, 68, 51, 46
Outline colors
Outline colours are used for borders, dividers, and stroke elements across the Little Lunches interface. They provide clear visual boundaries between components while staying consistent with the overall brand palette.
Grey-95
HEX
#EFF0F2
RGB
239, 240, 242
HSL
220, 10, 94
CMYK
5, 3, 2, 0
Blue-70
HEX
#8FDADC
RGB
143, 218, 220
HSL
182, 52, 71
CMYK
41, 0, 16, 0
Blue-20
HEX
#113747
RGB
17, 55, 71
HSL
198, 61, 17
CMYK
93, 68, 51, 46