Skip to content

New Component: ColorPicker #8374

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 11 commits into from
Nov 20, 2025
+4,130 −25
Merged

New Component: ColorPicker #8374

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
a7373fb
feat: add ColorPicker component
tanerengiiin Nov 3, 2025
4e7e5c4
feat: add colorpicker demo & doc
tanerengiiin Nov 3, 2025
6b37761
feat: add eyedropper icon
tanerengiiin Nov 3, 2025
1c8a9b6
chore: update menu.json
tanerengiiin Nov 3, 2025
f74968a
fix: ensure proper handling of missing types and interfaces in API do…
tanerengiiin Nov 3, 2025
1691127
feat: add OKLCH color manager, update disabled style of slider thumbs
tanerengiiin Nov 7, 2025
2c251cd
chore: update demos
tanerengiiin Nov 7, 2025
ec99977
fix: improve color value handling in color picker input and slider co…
tanerengiiin Nov 7, 2025
20ba604
refactor: update layout of color picker demo to use grid for better a…
tanerengiiin Nov 7, 2025
c2546c4
fix: synchronize channel inputs on format change in color picker
tanerengiiin Nov 7, 2025
066ca20
chore: manage box-shadow color with light-dark() function
tanerengiiin Nov 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 4 additions & 0 deletions apps/showcase/assets/menu/menu.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -63,6 +63,10 @@
"name": "Checkbox",
"to": "/docs/components/checkbox"
},
{
"name": "Color Picker",
"to": "/docs/components/colorpicker"
},
{
"name": "InputText",
"to": "/docs/components/inputtext"
Expand Down
82 changes: 82 additions & 0 deletions apps/showcase/demo/colorpicker/advanced-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,82 @@
'use client';
import type { ColorSpace } from '@primereact/types/shared/colorpicker';
import { ColorPicker } from 'primereact/colorpicker';
import * as React from 'react';

export default function AdvancedDemo() {
const [format, setFormat] = React.useState<ColorSpace>('hsla');

return (
<div className="card">
<div className="max-w-md space-y-4">
<select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
<option value="rgba">RGBA</option>
<option value="hsba">HSBA</option>
<option value="hsla">HSLA</option>
<option value="oklcha">OKLCHA</option>
</select>
<ColorPicker format={format}>
<ColorPicker.Area />
<ColorPicker.Slider />
{format === 'rgba' && (
<>
<ColorPicker.Slider channel="red" />
<ColorPicker.Slider channel="green" />
<ColorPicker.Slider channel="blue" />
</>
)}
{format === 'hsba' && (
<>
<ColorPicker.Slider channel="saturation" />
<ColorPicker.Slider channel="brightness" />
</>
)}

{format === 'hsla' && (
<>
<ColorPicker.Slider channel="saturation" />
<ColorPicker.Slider channel="lightness" />
</>
)}

<ColorPicker.Slider channel="alpha" />
<div className="flex gap-2">
<ColorPicker.Swatch />
<ColorPicker.EyeDropper />
<div className="flex-1">
<ColorPicker.Input fluid channel="hex" />
</div>
</div>
<div className="grid grid-cols-5 gap-2 items-center">
<span>RGBA</span>
<ColorPicker.Input fluid channel="red" />
<ColorPicker.Input fluid channel="green" />
<ColorPicker.Input fluid channel="blue" />
<ColorPicker.Input fluid channel="alpha" />

<span>HSBA</span>
<ColorPicker.Input fluid channel="hue" />
<ColorPicker.Input fluid channel="saturation" />
<ColorPicker.Input fluid channel="brightness" />
<ColorPicker.Input fluid channel="alpha" />

<span>HSLA</span>
<ColorPicker.Input fluid channel="hue" />
<ColorPicker.Input fluid channel="saturation" />
<ColorPicker.Input fluid channel="lightness" />
<ColorPicker.Input fluid channel="alpha" />

<span>OKLCHA</span>
<ColorPicker.Input fluid channel="L" />
<ColorPicker.Input fluid channel="C" />
<ColorPicker.Input fluid channel="H" />
<ColorPicker.Input fluid channel="alpha" />
</div>
<div className="flex gap-2">
<ColorPicker.Input fluid channel="css" />
</div>
</ColorPicker>
</div>
</div>
);
}
63 changes: 63 additions & 0 deletions apps/showcase/demo/colorpicker/basic-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
'use client';
import type { ColorSpace } from '@primereact/types/shared/colorpicker';
import { ColorPicker } from 'primereact/colorpicker';
import * as React from 'react';

export default function BasicDemo() {
const [format, setFormat] = React.useState<ColorSpace | 'hex'>('hex');

return (
<div className="card">
<div className="max-w-sm space-y-4">
<ColorPicker format={format === 'hex' ? 'rgba' : format}>
<ColorPicker.Area />
<div className="flex items-center gap-4">
<div className="flex-1 space-y-1">
<ColorPicker.Slider />
<ColorPicker.Slider channel="alpha" />
</div>
<div className="flex items-center gap-2">
<ColorPicker.Swatch />
<ColorPicker.EyeDropper />
</div>
</div>
<div className="flex gap-2">
<select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
<option value="hex">HEX</option>
<option value="rgba">RGBA</option>
<option value="hsba">HSBA</option>
<option value="hsla">HSLA</option>
<option value="oklcha">OKLCHA</option>
</select>
<div className="flex gap-2 flex-1">
{format === 'hex' && <ColorPicker.Input fluid channel="hex" />}
{format === 'oklcha' && <ColorPicker.Input fluid channel="css" />}
{format === 'rgba' && (
<>
<ColorPicker.Input fluid channel="red" />
<ColorPicker.Input fluid channel="green" />
<ColorPicker.Input fluid channel="blue" />
</>
)}
{format === 'hsba' && (
<>
<ColorPicker.Input fluid channel="hue" />
<ColorPicker.Input fluid channel="saturation" />
<ColorPicker.Input fluid channel="brightness" />
</>
)}
{format === 'hsla' && (
<>
<ColorPicker.Input fluid channel="hue" />
<ColorPicker.Input fluid channel="saturation" />
<ColorPicker.Input fluid channel="lightness" />
</>
)}
<ColorPicker.Input fluid channel="alpha" className="max-w-20" />
</div>
</div>
</ColorPicker>
</div>
</div>
);
}
70 changes: 70 additions & 0 deletions apps/showcase/demo/colorpicker/controlled-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
'use client';
import { parseColor } from '@primereact/headless/colorpicker';
import type { ColorInstance, ColorSpace } from '@primereact/types/shared/colorpicker';
import { useColorPickerChangeEvent } from '@primereact/types/shared/colorpicker';
import { ColorPicker } from 'primereact/colorpicker';
import * as React from 'react';

export default function ControlledDemo() {
const [format, setFormat] = React.useState<ColorSpace | 'hex'>('hex');
const [value, setValue] = React.useState<ColorInstance>(parseColor('#000000').toFormat(format === 'hex' ? 'rgba' : format));

return (
<div className="card">
<div className="max-w-sm space-y-4">
<ColorPicker
format={format === 'hex' ? 'rgba' : format}
onValueChange={(e: useColorPickerChangeEvent) => {
setValue(e.value);
}}
value={value}
>
<ColorPicker.Area />
<div className="flex items-center gap-4">
<div className="flex-1 space-y-1">
<ColorPicker.Slider />
<ColorPicker.Slider channel="alpha" />
</div>
<div className="flex items-center gap-2">
<ColorPicker.Swatch />
<ColorPicker.EyeDropper />
</div>
</div>
<div className="flex gap-2">
<select value={format} onChange={(e) => setFormat(e.target.value as ColorSpace)}>
<option value="hex">HEX</option>
<option value="rgba">RGBA</option>
<option value="hsba">HSBA</option>
<option value="hsla">HSLA</option>
</select>
<div className="flex gap-2 flex-1">
{format === 'hex' && <ColorPicker.Input fluid channel="hex" />}
{format === 'rgba' && (
<>
<ColorPicker.Input fluid channel="red" />
<ColorPicker.Input fluid channel="green" />
<ColorPicker.Input fluid channel="blue" />
</>
)}
{format === 'hsba' && (
<>
<ColorPicker.Input fluid channel="hue" />
<ColorPicker.Input fluid channel="saturation" />
<ColorPicker.Input fluid channel="brightness" />
</>
)}
{format === 'hsla' && (
<>
<ColorPicker.Input fluid channel="hue" />
<ColorPicker.Input fluid channel="saturation" />
<ColorPicker.Input fluid channel="lightness" />
</>
)}
<ColorPicker.Input fluid channel="alpha" />
</div>
</div>
</ColorPicker>
</div>
</div>
);
}
33 changes: 33 additions & 0 deletions apps/showcase/demo/colorpicker/popover-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import { ColorPicker } from 'primereact/colorpicker';
import { Popover } from 'primereact/popover';

function PopoverDemo() {
return (
<div className="card">
<ColorPicker defaultColor="#0099ff">
<Popover>
<Popover.Trigger unstyled>
<ColorPicker.Swatch />
</Popover.Trigger>
<Popover.Portal>
<Popover.Content className="min-w-72 w-full">
<div className="w-full space-y-3">
<ColorPicker.Area />
<div className="flex items-center gap-4">
<div className="flex-1 space-y-1">
<ColorPicker.Slider />
<ColorPicker.Slider channel="alpha" />
</div>
<ColorPicker.EyeDropper />
</div>
<ColorPicker.Input fluid channel="hex" />
</div>
</Popover.Content>
</Popover.Portal>
</Popover>
</ColorPicker>
</div>
);
}

export default PopoverDemo;
19 changes: 19 additions & 0 deletions apps/showcase/demo/colorpicker/vertical-slider-demo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import { ColorPicker } from 'primereact/colorpicker';

function VerticalSliderDemo() {
return (
<div className="card">
<ColorPicker format="hsba">
<div className="flex gap-4">
<ColorPicker.Area className="max-w-xs flex-1" />
<ColorPicker.Slider orientation="vertical" className="h-auto" />
<ColorPicker.Slider channel="saturation" orientation="vertical" />
<ColorPicker.Slider channel="brightness" orientation="vertical" />
<ColorPicker.Slider channel="alpha" orientation="vertical" />
</div>
</ColorPicker>
</div>
);
}

export default VerticalSliderDemo;
Loading
Loading