{"id":50801750,"url":"https://github.com/jaywcjlove/ColorSelector","last_synced_at":"2026-06-30T03:00:36.464Z","repository":{"id":288694945,"uuid":"968930620","full_name":"jaywcjlove/ColorSelector","owner":"jaywcjlove","description":"A SwiftUI color picker component library for macOS","archived":false,"fork":false,"pushed_at":"2026-06-13T22:12:01.000Z","size":66,"stargazers_count":47,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"main","last_synced_at":"2026-06-14T00:11:51.124Z","etag":null,"topics":["apple","color-picker","colorpicker","colorselector","jaywcjlove","macos","swift","swift-package-manager","swiftui","swiftui-components"],"latest_commit_sha":null,"homepage":"","language":"Swift","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/jaywcjlove.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null},"funding":{"github":["jaywcjlove"]}},"created_at":"2025-04-19T02:32:00.000Z","updated_at":"2026-06-13T22:10:34.000Z","dependencies_parsed_at":"2025-05-09T13:41:27.001Z","dependency_job_id":"956f88a2-62c0-4335-8669-6b5054f96ffc","html_url":"https://github.com/jaywcjlove/ColorSelector","commit_stats":null,"previous_names":["jaywcjlove/colorselector"],"tags_count":23,"template":false,"template_full_name":null,"purl":"pkg:github/jaywcjlove/ColorSelector","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FColorSelector","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FColorSelector/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FColorSelector/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FColorSelector/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jaywcjlove","download_url":"https://codeload.github.com/jaywcjlove/ColorSelector/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jaywcjlove%2FColorSelector/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34950330,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-30T02:00:05.919Z","response_time":92,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["apple","color-picker","colorpicker","colorselector","jaywcjlove","macos","swift","swift-package-manager","swiftui","swiftui-components"],"created_at":"2026-06-12T21:00:28.529Z","updated_at":"2026-06-30T03:00:36.457Z","avatar_url":"https://github.com/jaywcjlove.png","language":"Swift","funding_links":["https://github.com/sponsors/jaywcjlove"],"categories":["UI and SwiftUI"],"sub_categories":[],"readme":"\u003cdiv markdown=\"1\"\u003e\n  \u003csup align=\"center\"\u003eUsing \u003ca href=\"https://wangchujiang.com/#/app\" target=\"_blank\"\u003emy app\u003c/a\u003e is also a way to \u003ca href=\"https://wangchujiang.com/#/sponsor\" target=\"_blank\"\u003esupport\u003c/a\u003e me:\u003c/sup\u003e\n  \u003cbr\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6758053530\" title=\"Scap: Screenshot \u0026 Markup Edit for macOS\"\u003e\u003cimg alt=\"Scap: Screenshot \u0026 Markup Edit\" height=\"52\" src=\"https://wangchujiang.com/appicon/scap.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6757317079\" title=\"Screen Test for macOS\"\u003e\u003cimg alt=\"Screen Test\" height=\"52\" src=\"https://wangchujiang.com/appicon/screen-test.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6755948110\" title=\"Deskmark for macOS\"\u003e\u003cimg alt=\"Deskmark\" height=\"52\" src=\"https://wangchujiang.com/appicon/deskmark.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6500434773\" title=\"Keyzer for macOS\"\u003e\u003cimg alt=\"Keyzer\" height=\"52\" src=\"https://wangchujiang.com/appicon/keyzer.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://github.com/jaywcjlove/vidwall-hub\" title=\"Vidwall Hub for macOS\"\u003e\u003cimg alt=\"Vidwall Hub\" height=\"52\" src=\"https://wangchujiang.com/appicon/vidwall-hub.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6752624705\" title=\"VidCrop for macOS\"\u003e\u003cimg alt=\"VidCrop\" height=\"52\" src=\"https://wangchujiang.com/appicon/vidcrop.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6747587746\" title=\"Vidwall for macOS\"\u003e\u003cimg alt=\"Vidwall\" height=\"52\" src=\"https://wangchujiang.com/appicon/vidwall.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://wangchujiang.com/mousio-hint/\" title=\"Mousio Hint for macOS\"\u003e\u003cimg alt=\"Mousio Hint\" height=\"52\" src=\"https://wangchujiang.com/appicon/mousio-hint.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6746747327\" title=\"Mousio for macOS\"\u003e\u003cimg alt=\"Mousio\" height=\"52\" src=\"https://wangchujiang.com/appicon/mousio.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6745227444\" title=\"Musicer for macOS\"\u003e\u003cimg alt=\"Musicer\" height=\"52\" src=\"https://wangchujiang.com/appicon/musicer.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6743841447\" title=\"Audioer for macOS\"\u003e\u003cimg alt=\"Audioer\" height=\"52\" src=\"https://wangchujiang.com/appicon/audioer.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6744690194\" title=\"FileSentinel for macOS\"\u003e\u003cimg alt=\"FileSentinel\" height=\"52\" src=\"https://wangchujiang.com/appicon/file-sentinel.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6743495172\" title=\"FocusCursor for macOS\"\u003e\u003cimg alt=\"FocusCursor\" height=\"52\" src=\"https://wangchujiang.com/appicon/focus-cursor.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6742680573\" title=\"Videoer for macOS\"\u003e\u003cimg alt=\"Videoer\" height=\"52\" src=\"https://wangchujiang.com/appicon/videoer.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6740425504\" title=\"KeyClicker for macOS\"\u003e\u003cimg alt=\"KeyClicker\" height=\"52\" src=\"https://wangchujiang.com/appicon/key-clicker.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6739052447\" title=\"DayBar for macOS\"\u003e\u003cimg alt=\"DayBar\" height=\"52\" src=\"https://wangchujiang.com/appicon/daybar.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6739444407\" title=\"Iconed for macOS\"\u003e\u003cimg alt=\"Iconed\" height=\"52\" src=\"https://wangchujiang.com/appicon/iconed.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6737160756\" title=\"Menuist for macOS\"\u003e\u003cimg alt=\"Menuist\" height=\"52\" src=\"https://wangchujiang.com/appicon/rightmenu-master.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6723903021\" title=\"Paste Quick for macOS\"\u003e\u003cimg alt=\"Quick RSS\" height=\"52\" src=\"https://wangchujiang.com/appicon/paste-quick.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6670696072\u0026platform=mac\" title=\"Quick RSS for macOS/iOS\"\u003e\u003cimg alt=\"Quick RSS\" height=\"52\" src=\"https://wangchujiang.com/appicon/quick-rss.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6670167443\" title=\"Web Serve for macOS\"\u003e\u003cimg alt=\"Web Serve\" height=\"52\" src=\"https://wangchujiang.com/appicon/web-serve.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6503953628\u0026platform=mac\" title=\"Copybook Generator for macOS/iOS\"\u003e\u003cimg alt=\"Copybook Generator\" height=\"52\" src=\"https://wangchujiang.com/appicon/copybook-generator.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6471227008\u0026platform=mac\" title=\"DevTutor for macOS/iOS\"\u003e\u003cimg alt=\"DevTutor for SwiftUI\" height=\"52\" src=\"https://wangchujiang.com/appicon/devtutor.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6479819388\u0026platform=mac\" title=\"RegexMate for macOS/iOS\"\u003e\u003cimg alt=\"RegexMate\" height=\"52\" src=\"https://wangchujiang.com/appicon/regex-mate.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6479194014\u0026platform=mac\" title=\"Time Passage for macOS/iOS\"\u003e\u003cimg alt=\"Time Passage\" height=\"52\" src=\"https://wangchujiang.com/appicon/time-passage.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6478772538\" title=\"IconizeFolder for macOS\"\u003e\u003cimg alt=\"Iconize Folder\" height=\"52\" src=\"https://wangchujiang.com/appicon/iconize-folder.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6478511402\u0026platform=mac\" title=\"Textsound Saver for macOS/iOS\"\u003e\u003cimg alt=\"Textsound Saver\" height=\"52\" src=\"https://wangchujiang.com/appicon/textsound-saver.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6476924627\" title=\"Create Custom Symbols for macOS\"\u003e\u003cimg alt=\"Create Custom Symbols\" height=\"52\" src=\"https://wangchujiang.com/appicon/create-custom-symbols.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6476452351\" title=\"DevHub for macOS\"\u003e\u003cimg alt=\"DevHub\" height=\"52\" src=\"https://wangchujiang.com/appicon/devhub.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6476400184\" title=\"Resume Revise for macOS\"\u003e\u003cimg alt=\"Resume Revise\" height=\"52\" src=\"https://wangchujiang.com/appicon/resume-revise.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6472593276\" title=\"Palette Genius for macOS\"\u003e\u003cimg alt=\"Palette Genius\" height=\"52\" src=\"https://wangchujiang.com/appicon/palette-genius.png\"\u003e\u003c/a\u003e\n  \u003ca target=\"_blank\" href=\"https://jaywcjlove.github.io/maslink/?id=6470879005\" title=\"Symbol Scribe for macOS\"\u003e\u003cimg alt=\"Symbol Scribe\" height=\"52\" src=\"https://wangchujiang.com/appicon/symbol-scribe.png\"\u003e\u003c/a\u003e\n\u003c/div\u003e\n\u003chr\u003e\n\nColorSelector\n===\n\n[![Buy me a coffee](https://img.shields.io/badge/Buy_Me_a_Coffee-ffdd00?logo=buy-me-a-coffee\u0026logoColor=black)](https://jaywcjlove.github.io/#/sponsor)\n[![Follow On X](https://img.shields.io/badge/Follow%20on%20X-333333?logo=x\u0026logoColor=white)](https://x.com/jaywcjlove)\n\nA SwiftUI color picker component library for macOS, designed to replace the default ColorPicker component. In addition, I’ve created another component library, [Colorful](https://github.com/jaywcjlove/Colorful), which offers a different user experience with a distinct style.\n\n![ColorSelector for macOS/iOS](https://github.com/user-attachments/assets/aab49a01-6c3d-40e7-86c2-4013f2b8cc8d)\n\nWelcome to download [DevTutor](https://apps.apple.com/app/devtutor/id6471227008), a cheat sheet app designed to help developers quickly build excellent applications using SwiftUI.\n\n\u003cp\u003e\n  \u003ca target=\"_blank\" href=\"https://apps.apple.com/app/devtutor/id6471227008\" title=\"DevTutor for SwiftUI AppStore\"\u003e\u003cimg alt=\"DevTutor for SwiftUI AppStore\" src=\"https://jaywcjlove.github.io/sb/download/macos.svg\" height=\"51\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n## Usage\n\n```swift\nimport ColorSelector\n\nstruct ContentView: View {\n    @State var color: Color? = .red\n    @State var colorClear: Color? = .clear\n    @State var nsColor: NSColor? = NSColor.red\n    \n    var body: some View {\n        ColorSelector(\"Color\", selection: $color)\n        ColorSelector(selection: $colorClear)\n        ColorSelector(nsColor: $nsColor, arrowEdge: .top)\n        ColorSelector(selection: $color) {\n            Text(\"Color Picker\")\n        }\n        ColorSelector(selection: $color, footer: {\n            Text(\"Hello World\")\n        })\n        ColorSelector(selection: $color, footer: {\n            Text(\"Hello World\")\n        }) {\n            Text(\"Color Picker Footer\")\n        }\n        ColorSelector(nsColor: $nsColor, footer: {\n            Text(\"Hello World\")\n        })\n    }\n}\n```\n\nUsing the `swatchColors` environment value, developers can customize the color list in the color selector, replacing the default color options.\n\n```swift\nstruct ContentView: View {\n    @State var color: Color? = .red\n    \n    var body: some View {\n        ColorSelector(selection: $color)\n            .environment(\\.swatchColors, [\n                NSColor(hue: 0.999, saturation: 0.857, brightness: 0.878, alpha: 1.0),\n                NSColor(hue: 0.066, saturation: 1.000, brightness: 0.980, alpha: 1.0),\n                NSColor(hue: 0.121, saturation: 0.976, brightness: 0.969, alpha: 1.0),\n            ])\n        ///     \n        ColorSelector(selection: $colorClear, arrowEdge: .top)\n    }\n}\n```\n\nBy setting the `cornerSize` (corner radius) and `pointSize` (point size) environment values, the corner radius and point size can be dynamically adjusted.\n\n```swift\nstruct ContentView: View {\n    @State var color: Color? = .red\n    @State var cornerRadius: CGFloat = 6\n    @State var pointSize: CGSize = .init(width: 12, height: 12)\n    \n    var body: some View {\n        ColorSelector(selection: $color)\n            .environment(\\.cornerSize, cornerRadius)\n            .environment(\\.pointSize, pointSize)\n    }\n}\n```\n\n**arrowEdge**: The edge of the attachmentAnchor that defines the location of the popover’s arrow. The default is nil, which results in the system allowing any arrow edge.\n\n```swift\nimport ColorSelector\n\nstruct ContentView: View {\n    @State var colorClear: Color? = .clear\n    \n    var body: some View {\n        ColorSelector(selection: $colorClear, arrowEdge: .bottom)\n    }\n}\n```\n\nUse the `showsAlpha` modifier to control the visibility of the alpha (opacity) slider in the picker panel.\n\n```swift\nimport ColorSelector\n\nstruct ContentView: View {\n    @State var color: Color? = .clear\n    \n    var body: some View {\n        ColorSelector(selection: $color)\n            .showsAlpha(false)\n    }\n}\n```\n\nCustomize button size using the `controlSize` modifier\n\n```swift\nColorSelector(selection: $color)\n    .controlSize(.regular)\n```\n\nSet panel size\n\n```swift\nColorSelector(selection: $color)\n    .pickerSize(.constant(.init(width: 180, height: 280)))\n```\n\nAdd content to the bottom of the panel\n\n```swift\nColorSelector(selection: $color, footer: {\n    Text(\"Hello World\")\n}) {\n    Text(\"Color Picker Footer\")\n}\n```\n\n### ColorSelector Modifier\n\nThe `colorSelectorPopover` modifier provides an easy way to add color picker functionality to any view. The modifier attaches a popover that shows when triggered externally.\n\n```swift\nstruct ContentView: View {\n    @State private var backgroundColor: Color? = .blue\n    @State private var showColorPicker = false\n    \n    var body: some View {\n        Text(\"Background Color\")\n            .padding()\n            .background(backgroundColor ?? .clear)\n            .onTapGesture {\n                showColorPicker = true\n            }\n            .colorSelectorPopover(\n                selection: $backgroundColor,\n                isPresented: $showColorPicker\n            )\n    }\n}\n```\n\n**Basic usage with external popover control:**\n\n```swift\n@State private var textColor: Color? = .primary\n@State private var showTextPicker = false\n\nButton(\"Choose Text Color\") {\n    showTextPicker = true\n}\n.colorSelectorPopover(\n    selection: $textColor,\n    isPresented: $showTextPicker,\n    showsAlpha: false\n)\n```\n\n**Using NSColor binding:**\n\n```swift\n@State private var shadowColor: NSColor? = NSColor.gray\n@State private var showShadowPicker = false\n\nText(\"Shadow Color\")\n    .onTapGesture { showShadowPicker = true }\n    .colorSelectorPopover(\n        nsColor: $shadowColor,\n        isPresented: $showShadowPicker,\n        arrowEdge: .top\n    )\n```\n\n**Available parameters:**\n\n- `selection`: A binding to the selected Color\n- `nsColor`: A binding to the selected NSColor (alternative to selection)\n- `isPresented`: A binding to control popover visibility\n- `arrowEdge`: The edge where the popover arrow appears (default: system decides)\n- `showsAlpha`: Whether to show alpha controls (default: true)\n\n### ColorSelectorButton\n\nThe `ColorSelectorButton` is a standalone button component that displays the current selected color and can trigger a popover when tapped. This component provides the visual color representation without the popover functionality built-in.\n\n```swift\nstruct ContentView: View {\n    @State private var selectedColor: Color? = .blue\n    @State private var showColorPicker = false\n    @State private var buttonSize: ControlSize = .regular\n    \n    var body: some View {\n        VStack(spacing: 20) {\n            // Color selector button\n            ColorSelectorButton(\n                popover: $showColorPicker,\n                selection: $selectedColor,\n                controlSize: $buttonSize\n            )\n            \n            // Display current color\n            Text(\"Selected: \\(selectedColor?.description ?? \"None\")\")\n        }\n        .colorSelectorPopover(\n            selection: $selectedColor,\n            isPresented: $showColorPicker\n        )\n    }\n}\n```\n\n**Customize button size:**\n\n```swift\n@State private var buttonSize: ControlSize = .large\n\nColorSelectorButton(\n    popover: $showColorPicker,\n    selection: $selectedColor,\n    controlSize: $buttonSize\n)\n```\n\n**Available control sizes:** `.mini`, `.small`, `.regular`, `.large`, `.extraLarge`\n\n### AlphaSlider\n\n```swift\nstruct ContentView: View {\n    @State var alpha: CGFloat = 1.0\n    var saturation: CGFloat = 1.0\n    var brightness: CGFloat = 1.0\n    var hue: CGFloat = 0.0\n    \n    var body: some View {\n        AlphaSlider(\n            alpha: $alpha,\n            hue: hue,\n            saturation: saturation,\n            brightness: brightness\n        )\n    }\n}\n```\n\n### ColorSampler\n\n```swift\nstruct ContentView: View {\n    @State var color: Color = Color.red\n    var cornerRadius: CGFloat = 6\n    var pointSize: CGSize = .init(width: 8, height: 8)\n    \n    var body: some View {\n        ColorSampler(\n            color: $color,\n            cornerRadius: cornerRadius,\n            pointSize: pointSize\n        )\n    }\n}\n```\n\nYou can customize the width and height of the rectangle using the `rectSize` modifier.\n\n```swift\n#Preview {\n    @Previewable @State var color: Color? = Color.blue\n    ColorSampler(color: $color)\n        .rectSize(23)\n}\n```\n\n### HueSlider\n\n```swift\nstruct ContentView: View {\n    @State var hue: CGFloat = 1\n    \n    var body: some View {\n        HueSlider(hue: $hue)\n    }\n}\n```\n\n### Saturation\n\n```swift\nstruct ContentView: View {\n    @State var saturation: CGFloat = 1.0\n    @State var brightness: CGFloat = 1.0\n    var hue: CGFloat = 0.0\n    \n    var body: some View {\n        Saturation(\n            saturation: $saturation,\n            brightness: $brightness,\n            hue: hue,\n            cornerRadius: 16\n        )\n    }\n}\n```\n\n### Swatch\n\n```swift\nstruct ContentView: View {\n    @State var color: NSColor = NSColor.white\n    \n    var body: some View {\n        Swatch()\n        Swatch(nsColor: color) { value in\n            color = value\n        }\n    }\n}\n```\n\n### Sketch\n\n```swift\nstruct ContentView: View {\n    @State var saturation: CGFloat = 1.0\n    @State var brightness: CGFloat = 1.0\n    @State var hue: CGFloat = 0.0\n    @State var alpha: CGFloat = 1.0\n    \n    var body: some View {\n        Sketch(\n            hue: $hue,\n            saturation: $saturation,\n            brightness: $brightness,\n            alpha: $alpha\n        )\n        .frame(width: 180, height: 230)\n    }\n}\n```\n\n## License\n\nLicensed under the MIT License.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2FColorSelector","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaywcjlove%2FColorSelector","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaywcjlove%2FColorSelector/lists"}