diff --git a/resources/views/tools/color-picker.blade.php b/resources/views/tools/color-picker.blade.php
new file mode 100644
index 0000000..d3cde18
--- /dev/null
+++ b/resources/views/tools/color-picker.blade.php
@@ -0,0 +1,490 @@
+@extends('layouts.app')
+
+@section('title', 'Color Picker & Converter - HEX, RGB, HSL, CMYK | Dev Tools')
+@section('meta_description', 'Free online color picker and converter. Convert between HEX, RGB, HSL, and CMYK color formats. Generate color palettes and complementary colors.')
+@section('meta_keywords', 'color picker, color converter, hex to rgb, rgb to hex, hsl converter, cmyk converter, color palette, color tool, web colors')
+
+@push('schema')
+
+@endpush
+
+@section('content')
+
+
+
+
Color Picker & Converter
+
Convert between HEX, RGB, HSL, and CMYK formats
+
+
← Back
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Click any color to copy its HEX value
+
+
+
+
+
+
+
+
+ Brightness:
+
+
+
+ Luminance:
+
+
+
+ Suggested Text:
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+@endsection
+
+@push('scripts')
+
+@endpush
diff --git a/routes/web.php b/routes/web.php
index 7c8961e..259e6ab 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -17,6 +17,7 @@
Route::get('/url', [ToolController::class, 'url'])->name('url');
Route::get('/code-editor', [ToolController::class, 'codeEditor'])->name('code-editor');
Route::get('/regex', [ToolController::class, 'regex'])->name('regex');
+ Route::get('/color-picker', [ToolController::class, 'colorPicker'])->name('color-picker');
});
// Static Pages
@@ -38,6 +39,7 @@
['loc' => route('tools.url'), 'priority' => '0.8', 'changefreq' => 'monthly'],
['loc' => route('tools.code-editor'), 'priority' => '0.9', 'changefreq' => 'monthly'],
['loc' => route('tools.regex'), 'priority' => '0.8', 'changefreq' => 'monthly'],
+ ['loc' => route('tools.color-picker'), 'priority' => '0.8', 'changefreq' => 'monthly'],
['loc' => route('about'), 'priority' => '0.5', 'changefreq' => 'monthly'],
['loc' => route('privacy'), 'priority' => '0.3', 'changefreq' => 'yearly'],
];
diff --git a/tests/Feature/WebRoutesTest.php b/tests/Feature/WebRoutesTest.php
index 71c4bf8..702e0be 100644
--- a/tests/Feature/WebRoutesTest.php
+++ b/tests/Feature/WebRoutesTest.php
@@ -29,6 +29,7 @@ public function test_home_page_displays_all_tools(): void
$response->assertSee('URL Encoder');
$response->assertSee('Code Editor');
$response->assertSee('Regex Tester');
+ $response->assertSee('Color Picker');
}
public function test_home_page_has_tool_links(): void
@@ -46,6 +47,7 @@ public function test_home_page_has_tool_links(): void
$response->assertSee('href="' . route('tools.url') . '"', false);
$response->assertSee('href="' . route('tools.code-editor') . '"', false);
$response->assertSee('href="' . route('tools.regex') . '"', false);
+ $response->assertSee('href="' . route('tools.color-picker') . '"', false);
}
public function test_csv_tool_page_loads(): void
@@ -252,9 +254,30 @@ public function test_regex_tool_has_required_elements(): void
$response->assertSee('Match Details');
}
+ public function test_color_picker_page_loads(): void
+ {
+ $response = $this->get('/tools/color-picker');
+
+ $response->assertStatus(200);
+ $response->assertSee('Color Picker');
+ $response->assertSee('Convert between HEX, RGB, HSL, and CMYK');
+ }
+
+ public function test_color_picker_has_required_elements(): void
+ {
+ $response = $this->get('/tools/color-picker');
+
+ $response->assertStatus(200);
+ $response->assertSee('HEX');
+ $response->assertSee('RGB');
+ $response->assertSee('HSL');
+ $response->assertSee('CMYK');
+ $response->assertSee('Color Harmony');
+ }
+
public function test_all_pages_have_navigation(): void
{
- $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex'];
+ $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/color-picker'];
foreach ($pages as $page) {
$response = $this->get($page);
@@ -266,7 +289,7 @@ public function test_all_pages_have_navigation(): void
public function test_all_pages_have_theme_toggle(): void
{
- $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex'];
+ $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/regex', '/tools/color-picker'];
foreach ($pages as $page) {
$response = $this->get($page);
@@ -279,7 +302,7 @@ public function test_all_pages_have_theme_toggle(): void
public function test_all_pages_load_vite_assets(): void
{
// Code editor uses standalone template without Vite
- $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex'];
+ $pages = ['/', '/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/color-picker'];
foreach ($pages as $page) {
$response = $this->get($page);
@@ -292,7 +315,7 @@ public function test_all_pages_load_vite_assets(): void
public function test_all_tool_pages_have_back_link(): void
{
// Code editor uses standalone template with home link instead of back
- $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex'];
+ $toolPages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/regex', '/tools/color-picker'];
foreach ($toolPages as $page) {
$response = $this->get($page);
@@ -345,7 +368,7 @@ public function test_api_routes_reject_get_requests(): void
public function test_pages_have_csrf_token(): void
{
- $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor'];
+ $pages = ['/tools/csv', '/tools/yaml', '/tools/markdown', '/tools/sql', '/tools/base64', '/tools/uuid', '/tools/hash', '/tools/url', '/tools/code-editor', '/tools/color-picker'];
foreach ($pages as $page) {
$response = $this->get($page);