Hue Harbor is a versatile color palette management platform designed to streamline the process of creating, customizing, and integrating color palettes into your projects. Whether you're a designer, developer, or creative enthusiast, Hue Harbor provides the tools you need to bring your projects to life with vibrant colors and effortless creativity.
- Create Custom Color Palettes: Easily create personalized color palettes using our intuitive interface and advanced color tools.
- Manage Your Palettes: Organize, edit, and customize your color palettes with ease, ensuring consistency across your projects.
- Explore Public Palettes: Discover a curated collection of inspiring color combinations contributed by our creative community.
- Seamless Integration: Integrate your palettes into your projects effortlessly using our provided CDN or APIs.
- Collaborate with Ease: Share your palettes with team members or clients and collaborate on projects in real-time.
To use your palettes in your projects using CDN you can use any one of the following methods.
- Using website id
- Make sure you have website id with you, then include the following tag inside of your html document
<link rel="stylesheet" href="https://hue-harbor.imrohitsaini.in/api/cdn/website/<YOUR-WEBSITE-ID>" />- Using palette slug
- Make sure you have slug of your palette with you. Then add the following html
<link rel="stylesheet" href="https://hue-harbor.imrohitsaini.in/api/cdn/palette/<YOUR-PALETTE-SLUG>" />*Note You can use CDN for PUBLIC palettes only
We have created few APIs to meet your needs. If you are using any framework which supports hooks then you can create a hook like below in your project and can use accordingly.
import { useCallback, useEffect, useState } from 'react'
type UseHueHarborProps = {
apiKey: string // you can create and get API key from your dashboard
paletteSlug: string
}
/**
* This hook will fetch and insert all css variables from a palette
* into your DOM :root
*/
type Response = {
message: string
data: Array<{ variableName: string; value: string }>
}
export default function useHueHarbor({ apiKey, paletteSlug }: UseHueHarborProps) {
const [isLoading, setIsLoading] = useState(false)
const [error, setError] = useState('')
const [variables, setVariables] = useState<Response['data']>([])
const fetchAndUpdateCSS = useCallback(() => {
setIsLoading(true)
fetch(`https://hue-harbor.imrohitsaini.in/api/cdn/raw/${paletteSlug}`, {
headers: {
Authorization: `Bearer ${apiKey}`,
},
})
.then((res) => res.json())
.then((res: Response) => {
res.data.forEach((variable) => {
document.body.style.setProperty(variable.variableName, variable.value)
})
setVariables(res.data)
})
.catch(() => {
setError('Something went wrong!')
})
.finally(() => {
setIsLoading(false)
})
}, [apiKey, paletteSlug])
useEffect(
function fetchVariables() {
fetchAndUpdateCSS()
},
[fetchAndUpdateCSS],
)
return {
isLoading,
error,
variables,
}
}To get started with Hue Harbor, follow these simple steps:
- Sign Up: Create your account at Hue Harbor.
- Explore Public Palettes: Browse through our curated collection of public palettes for inspiration.
- Create Your Palette: Use our intuitive tools to create your custom color palette or import existing ones.
- Integrate with Your Projects: Easily integrate your palettes into your websites, apps, or designs using our provided CDN or APIs.
To install Hue Harbor locally, follow these steps:
- Clone the repository:
https://github.com/rockingrohit9639/hue-harbor - Navigate to the project directory:
cd hue-harbor - Install dependencies:
pnpm install - Add required environment variables
- Start the development server:
pnpm dev
We welcome contributions from the community! If you'd like to contribute to Hue Harbor, please follow these guidelines:
- Fork the repository and create your branch:
git checkout -b feature/new-feature - Commit your changes:
git commit -am 'Add new feature' - Push to the branch:
git push origin feature/new-feature - Submit a pull request with your changes.
This project is licensed under the MIT License.