FLIN App

Brand Color

Select a primary brand color.

Brand Color

#c9952c

Background Color

Choose a background color with live preview.

Background

#1a1a2e

Accent Color

Secondary accent color for highlights.

Accent

#4dabf7

Text Color

Choose the primary text color for content.

Text Color

Sample text in your color

Theme Builder

Multiple color pickers for building a color theme.

Primary

Background

Accent

Border

Palette Preview

See your selected colors side by side.

#c9952c#1a1a2e#4dabf7

Usage

brandColor = "#c9952c"// Basic color picker<ColorPicker label="Brand Color" bind={brandColor} />// Display selected color<Badge>{brandColor}</Badge>// Use in styles<div style="background: {brandColor}">Preview</div>

Props

Prop	Type	Default	Description
`label`	text	""	Label text above picker
`bind`	binding	-	Two-way binding for hex color value

ColorPicker

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Brand Color

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Background Color

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Accent Color

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Text Color

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Theme Builder

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Palette Preview

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Usage

.flin-icon { display: inline-block; vertical-align: middle; flex-shrink: 0; } Props

Brand Color

Background Color

Accent Color

Text Color

Theme Builder

Palette Preview

Usage

Props