Color Picker
A swatch grid that dispatches a custom event
3
component
UI Components
Basics
This component dispatches a custom event `colorselected` which can be listened to like a normal DOM event
["component","getting-started"]
Example
Semantic UI
UI Framework
Docs
Learn
Examples
ctrl+k
Enter a search term above to see results...
Collapse
Categories
Framework
UI Components
Templates
Reactivity
Query
Utils
Dates
Basics
Product Card
Checkbox
Tabs
Color Picker
Lists
Accordion
Emoji Reactions
Star Rating
Packing List
Events
Drag Dot
Dropdown
Context Menu
Form Elements
Temperature Converter
Rating Slider
Password Strength
Autocomplete
Composition
Progress Bar
Dynamic Table
Card Search
Applications
TodoMVC
Form Builder
Theme Colors
Animation
Clock
Solar System
Loader
Canvas
Spectrum Analyzer
Bouncing Balls
Collisions
Fireworks
Solar System 3D
UI Framework
Docs
Learn
Examples
Examples
Intro
Minimal
CDN
Standard
Components
Authoring
Tailwind
Reactivity
Embedding
Icon Libraries
Lifecycle
On Created
Counter
Maximal
Server Rendering
Error Recovery
Settings
Basic Settings
Modifying Settings
Setting Types
Events
Event Binding
Data Attributes
List Item Data
Global Events
Subtemplate Events
Keybinding
Basic Keys
Advanced Keys
Communication
External Calls
Styling
Theme Preview
Color Palette
Dynamic Breakpoints
Tailwind
Specs
Using Specs
Spec Helpers
Spec Settings and Content
Spec Data Context
Attribute Aliases
Plural Components
Basics
Product Card
Checkbox
Tabs
Color Picker
Lists
Accordion
Emoji Reactions
Star Rating
Packing List
Events
Drag Dot
Dropdown
Context Menu
Form Elements
Temperature Converter
Rating Slider
Password Strength
Autocomplete
Composition
Progress Bar
Dynamic Table
Card Search
Applications
TodoMVC
Form Builder
Theme Colors
Animation
Clock
Solar System
Loader
Canvas
Spectrum Analyzer
Bouncing Balls
Collisions
Fireworks
Solar System 3D
Expressions
Basic Expressions
Data Context
Boolean Attr
Raw HTML
Properties
Function References
Expression Syntax
Semantic / Lisp Style
Javascript Style
Mixed Style
Syntax Showcase
Whitespace Condensing
Events
@event
Conditionals
If
Else If
Nested
Match
Basic
Multiple Values
Exact
Loops
Each
Each In / As
Each Index
Object Keys
Each Else
List Identity
Async
Async
Async Advanced
Async Refetch
Snippets
Snippets
Parameters
Subtemplates
Basic Subtemplates
Templates as Settings
Data Reactivity
Slots
Default
Named
Reactivity
Reactive Sources
Rerender & Guard
Teardown
Helpers
Logical
Comparison
String
CSS
Array & Object
Date & Number
Reactivity
Logging
Custom Helpers
Introduction
Signals vs Values
Reactions
Automatic Batching
Flush
Mutation Helpers
Using Reactions
Signals
Signals
Peek
Derived
Derived
Computed
Match
Birthday Calendar
Reactions
First Run
Stop Reaction
Cleanup
Nonreactive
Guard
External Sync
Async
Async Reactions
Tracking After Await
Abort Signals
Resource
Errors
Flushing
Batch Updates
After Flush
Deferring Work
Schedule Flush
Signal Options
Equality
Safety
Dependencies
Depend
Notify
hasDependents
Version
Custom Sources
Debugging
Context
Tracing
Reactive Objects
Reactive Object
Object Has
Object Clone
Object Depend
Object Notify
Object Version
Helpers
Increment
Decrement
Toggle
Now
Clear
Push
Unshift
Splice
Get Index
Set Index
Remove Index
Set Index Property
Map
Filter
Get Item
Set Property
Replace Item
Remove Item
Mutate
Setup
ESM Usage
Browser Usage
Export Globals
Custom Alias
Custom Root
Introduction
DOM Selectors
DOM Creation
Chaining
Shadow DOM
Collections
.count()
.exists()
.first()
.last()
.eq()
.slice()
.each()
.map()
.filter()
.not()
.is()
.index()
.indexOf()
.add()
.el()
.get()
DOM Traversal
.children()
.closest()
.closestAll()
.contains()
.find()
.next()
.parent()
.prev()
.siblings()
Content
.text()
.textNode()
.html()
.outerHTML()
.value()
.getSlot()
.setSlot()
DOM Manipulation
.append()
.prepend()
.appendTo()
.prependTo()
.insertBefore()
.insertAfter()
.clone()
.remove()
.detach()
.reverse()
Attributes
.attr()
.addAttr()
.removeAttr()
.data()
.removeData()
.addClass()
.removeClass()
.toggleClass()
.hasClass()
.prop()
Styling
.css()
.cssVar()
.computedStyle()
Events
.on()
.on() Event Object
.on() Delegation
.off()
Event Namespaces
.one()
.on() Abort
.onNext()
.ready()
.intercept()
.trigger()
.click()
.submit()
.focus()
.blur()
.dispatchEvent()
Dimensions
.width()
.height()
.innerWidth()
.innerHeight()
.outerWidth()
.outerHeight()
.naturalWidth()
.naturalHeight()
.scrollWidth()
.scrollHeight()
.scrollTop()
.scrollLeft()
.dimensions()
Position
.bounds()
.position()
.pagePosition()
.offsetParent()
.positioningParent()
.clippingParent()
.scrollParent()
.intersects()
Visibility
.show()
.hide()
.toggle()
.naturalDisplay()
.isVisible()
.isInView()
Components
.settings()
.setting()
.component()
.initialize()
.dataContext()
Behaviors
Transition
Attach
Tooltip
Extending Query
Plugin
Behavior
Behavior Methods
Behavior Mutations
Behavior Events
Setup
Browser Usage
ESM Usage
Looping
each
asyncEach
asyncMap
Types
isString
isNumber
isBoolean
isArray
isFunction
isObject
isPlainObject
isEmpty
isPromise
isMap
isSet
isBinary
isDOM
isNode
isClassInstance
isArguments
Coercion
toNumber
toInteger
toBoolean
toString
toDate
toDuration
toByteSize
toBytes
Equality & Cloning
isEqual
clone
deepFreeze
Arrays
unique
filterEmpty
first
last
flatten
inArray
firstMatch
findIndex
where
some / any
remove
moveItem
sortBy
groupBy
intersection
difference
uniqueItems
range
sequence
sum
Objects
keys
values
hasProperty
extend
assignInPlace
deepExtend
pick / onlyKeys
filterObject
mapObject
arrayFromObject
reverseKeys
proxyObject
weightedObjectSearch
Paths
get
has
set
unset
keyedPath
eachPath
splitPath
parsePath
pathFrom
elementPath
pathKey
isPathKey
pathCovers
pathsOverlap
wildcardPath
expandPath
Change Detection
detectChanges
elementKey
trackWrites
trackReads
Strings
capitalize
capitalizeWords
toTitleCase
tokenize
humanize
kebabToCamel
camelToKebab
joinWords
getArticle
truncate
reverseString
escapeHTML
unescapeHTML
editDistance
similarity
suggest
fill
Functions
noop
wrapFunction
wait
memoize
createCache
debounce
debounce (async)
throttle
throttle (async)
Numbers
roundDecimal
roundNumber
Dates
formatDate
formatDuration
Regex
escapeRegExp
Bytes
toBase64
fromBase64
byteLength
formatByteSize
Crypto
generateId
isValidId
parseId
hashCode
getRandomSeed
Environment
isClient / isServer
isDevelopment
isCI
Browser
copyText
getIPAddress
getJSON
getKeyFromEvent
getText
idleCallback
openLink
CSS
adoptStylesheet
extractCSS
parseCSS
scopeStyles
selectorSpecificity
stringifyCSS
HTML
indentHTML
indentLines
parseHTML
stringifyHTML
Colors
oklchToHex
oklchToRgb
Debug
log
createLogger
warnOnce
error
throwError
createErrors
markTimeline
measureTimeline
Setup
ESM Usage
configure()
Datetime
datetime()
now()
startOfToday()
endOfToday()
Properties
.plus()
.minus()
.set()
.at()
.in()
.startOf()
.endOf()
.round()
.floor()
.ceil()
.next()
.previous()
.equals()
.isBefore()
.isAfter()
.isSame()
.isPast()
.isFuture()
.isToday()
.isTomorrow()
.isYesterday()
.isWeekend()
.isWeekday()
.isLeapYear()
.until()
.since()
.to()
.range()
.format()
.formatRelative()
.toString()
.toJSON()
.toJSDate()
.toTemporal()
Date Reads
Date
date()
today()
tomorrow()
yesterday()
Properties
.plus()
.minus()
.set()
.startOf()
.endOf()
.next()
.previous()
.equals()
.isBefore()
.isAfter()
.isSame()
.isPast()
.isFuture()
.isToday()
.isTomorrow()
.isYesterday()
.isWeekend()
.isWeekday()
.isLeapYear()
.until()
.since()
.at()
.to()
.range()
.points()
.split()
.format()
.formatRelative()
.toString()
.toJSON()
.toJSDate()
.toTemporal()
Time
time()
Properties
.plus()
.minus()
.set()
.startOf()
.endOf()
.round()
.floor()
.ceil()
.equals()
.isBefore()
.isAfter()
.isSame()
.until()
.since()
.on()
.to()
.format()
.toString()
.toJSON()
.toTemporal()
Duration
duration()
years() to milliseconds()
Properties
.plus()
.minus()
.times()
.negated()
.abs()
.balance()
.round()
.total()
.compare()
.equals()
.isZero()
.isNegative()
.toFields()
.toMilliseconds()
.format()
.toString()
.toJSON()
.toTemporal()
Ranges
dateRange()
datetimeRange()
timeRange()
Properties
.contains()
.overlaps()
.intersection()
.equals()
.isEmpty()
.points()
.split()
.in()
.format()
.toString()
.toJSON()
Helpers
compare()
earliest()
latest()
kindOf()
weekday()
weekdayNames()
monthNames()
isDateTime()
isCalendarDate()
isTime()
isDuration()
isDateRange()
isDateTimeRange()
isTimeRange()
Brand Symbols
Return to main menu
Return to main menu
Semantic UI