Natural Language UI Components

Parsing Sky
#90e0ef
Intent Green
#8ac926
Syntax Coral
#ff595e
Response Linen
#fff4e6
Voice Indigo
#4c5c96
Token Grey
#cfcfcf

The palette consists of Light, Semi dark colors. Accent colors Parsing Sky #90e0ef and Response Linen #fff4e6. Palette has Cool, Warm, Neutral colors temperature.

By lightness, this palette runs from #4C5C96 (darkest) to #FFF4E6 (lightest). The lightness range is moderate.

Overall saturation feels vivid (higher chroma).

Some hue pairs sit near complementary positions — you may read this as complementary contrast (loose heuristic).

Warm and cool swatches are fairly balanced.

HEX codes (sorted): #4C5C96, #8AC926, #90E0EF, #CFCFCF, #FF595E, #FFF4E6

Palette Natural Language UI Components has combination of 6 codes colors:

HEX: #90e0ef, RGB: (144, 224, 239); HEX: #8ac926, RGB: (138, 201, 38); HEX: #ff595e, RGB: (255, 89, 94)

HEX: #fff4e6, RGB: (255, 244, 230); HEX: #4c5c96, RGB: (76, 92, 150); HEX: #cfcfcf, RGB: (207, 207, 207)

Simplified version of palette colors

Tint of powderblue, Tint of Yellowgreen, Tint of salmon, Shade of oldlace, Shade of darkslateblue, Tint of lightgrey

Color scheme was created by colourlock

More palettes with:

Colors codes in palette

Natural Language UI Components color codes HEX, RGB information in table

Color	HEX	RGB	Name	Alternative name
#90e0ef	#90e0ef	RGB(144, 224, 239)	Parsing Sky	—
#8ac926	#8ac926	RGB(138, 201, 38)	Intent Green	—
#ff595e	#ff595e	RGB(255, 89, 94)	Syntax Coral	—
#fff4e6	#fff4e6	RGB(255, 244, 230)	Response Linen	—
#4c5c96	#4c5c96	RGB(76, 92, 150)	Voice Indigo	—
#cfcfcf	#cfcfcf	RGB(207, 207, 207)	Token Grey	American Silver

Color Palette Contrast

8 color pairs have low contrast and need improvement which may impact readability.

Text Color	Background Color	Contrast Ratio
#90e0ef	#8ac926	1.34
#90e0ef	#fff4e6	1.37
#90e0ef	#cfcfcf	1.04
#8ac926	#ff595e	1.52
#8ac926	#fff4e6	1.84
#8ac926	#cfcfcf	1.28

Image palette Natural Language UI Components png

Natural Language UI Components - #554108

--color-parsing-sky:	#90e0ef;
--color-intent-green:	#8ac926;
--color-syntax-coral:	#ff595e;
--color-response-linen:	#fff4e6;
--color-voice-indigo:	#4c5c96;
--color-token-grey:	#cfcfcf;

$color-parsing-sky:	#90e0ef;
$color-intent-green:	#8ac926;
$color-syntax-coral:	#ff595e;
$color-response-linen:	#fff4e6;
$color-voice-indigo:	#4c5c96;
$color-token-grey:	#cfcfcf;

@color-parsing-sky:	#90e0ef;
@color-intent-green:	#8ac926;
@color-syntax-coral:	#ff595e;
@color-response-linen:	#fff4e6;
@color-voice-indigo:	#4c5c96;
@color-token-grey:	#cfcfcf;