diff --git a/semcore/color-picker/CHANGELOG.md b/semcore/color-picker/CHANGELOG.md
index d7b7999ef8..2a17fad4cf 100644
--- a/semcore/color-picker/CHANGELOG.md
+++ b/semcore/color-picker/CHANGELOG.md
@@ -2,12 +2,14 @@
 
 CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
 
-
 ## [16.1.12] - 2025-11-10
 
 ### Fixed
 
 - Issue with `svg` in `ColorPicker.Trigger` and `ColorPicker.Item`.
+- `size` property didn't apply for the `PaletteManager.InputColor`.
+- Incorrect types for `PaletteManager`.
+- Validation issues in `PaletteManager.InputColor`.
 
 ## [16.1.11] - 2025-10-29
 
diff --git a/semcore/color-picker/__tests__/color-picker.axe-test.tsx b/semcore/color-picker/__tests__/color-picker.axe-test.tsx
index 2fc9bec472..fe3de73c36 100644
--- a/semcore/color-picker/__tests__/color-picker.axe-test.tsx
+++ b/semcore/color-picker/__tests__/color-picker.axe-test.tsx
@@ -38,7 +38,7 @@ test.describe(`@color-picker ${TAG.ACCESSIBILITY}`, () => {
   });
 
   test('Input validation', async ({ page }) => {
-    await loadPage(page, 'stories/components/color-picker/docs/examples/input_validation.tsx', 'en');
+    await loadPage(page, 'stories/components/color-picker/tests/examples/input_validation.tsx', 'en');
 
     await page.locator('[data-ui-name="ColorPicker.Trigger"]').click();
     const input = page.locator('input[data-ui-name="PaletteManager.InputColor"]');
diff --git a/semcore/color-picker/__tests__/color-picker.browser-test.tsx b/semcore/color-picker/__tests__/color-picker.browser-test.tsx
index c854068a90..6b48db5303 100644
--- a/semcore/color-picker/__tests__/color-picker.browser-test.tsx
+++ b/semcore/color-picker/__tests__/color-picker.browser-test.tsx
@@ -596,7 +596,7 @@ test.describe(`${TAG.FUNCTIONAL}`, () => {
     await locators.clearColor(page).click();
     await expect(locators.inputColor(page)).toBeFocused();
     await expect(locators.palette(page)).toBeEmpty();
-    await expect(locators.inputColor(page)).toHaveAttribute('aria-invalid', 'true');
+    await expect(locators.inputColor(page)).toHaveAttribute('aria-invalid', 'false');
     await expect(locators.inputColor(page)).toBeEmpty();
 
     await locators.inputColor(page).fill('999');
diff --git a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-chromium-linux.png b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-chromium-linux.png
index 1b40af581f..1685aaabe0 100644
Binary files a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-chromium-linux.png and b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-chromium-linux.png differ
diff --git a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-firefox-linux.png b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-firefox-linux.png
index 3de59a57a4..11f638a745 100644
Binary files a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-firefox-linux.png and b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-firefox-linux.png differ
diff --git a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-webkit-linux.png b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-webkit-linux.png
index 99d8d11deb..aa010d0c18 100644
Binary files a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-webkit-linux.png and b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-1-webkit-linux.png differ
diff --git a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-chromium-linux.png b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-chromium-linux.png
index 6815631ffa..76d4847040 100644
Binary files a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-chromium-linux.png and b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-chromium-linux.png differ
diff --git a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-firefox-linux.png b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-firefox-linux.png
index d8eba09542..89ad1cb02d 100644
Binary files a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-firefox-linux.png and b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-firefox-linux.png differ
diff --git a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-webkit-linux.png b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-webkit-linux.png
index 6202e749ec..bcb9468804 100644
Binary files a/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-webkit-linux.png and b/semcore/color-picker/__tests__/color-picker.browser-test.tsx-snapshots/-visual-Verify-ColorPicker-Item-PaletteManager-Item-and-ColorPicker-Input-2-webkit-linux.png differ
diff --git a/semcore/color-picker/src/components/InputColor.tsx b/semcore/color-picker/src/components/InputColor.tsx
index e048857587..d9e2fe9975 100644
--- a/semcore/color-picker/src/components/InputColor.tsx
+++ b/semcore/color-picker/src/components/InputColor.tsx
@@ -3,6 +3,7 @@ import { Box } from '@semcore/flex-box';
 import CheckM from '@semcore/icon/Check/m';
 import CloseM from '@semcore/icon/Close/m';
 import Input from '@semcore/input';
+import type { InputSize } from '@semcore/input';
 import React from 'react';
 
 import style from '../style/color-picker.shadow.css';
@@ -18,6 +19,7 @@ type InputColorAsProps = {
   focus?: boolean;
   Children: any;
   getI18nText: (messageId: string, values?: { [key: string]: string | number }) => string;
+  size?: InputSize;
 };
 
 function isValidHex(hex: string) {
@@ -69,6 +71,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
 
   handlerCancel = (event: React.MouseEvent) => {
     this.handlers.value('', event);
+    this.handlers.state('normal');
   };
 
   handlerChange = debounce((value: string) => {
@@ -91,7 +94,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
   };
 
   render() {
-    const { styles, state, value, onFocus, onBlur, focus, getI18nText } = this.asProps;
+    const { styles, state, value, onFocus, onBlur, focus, getI18nText, size } = this.asProps;
 
     const SPaletteManager = Box;
     const SInputValue = Root;
@@ -108,7 +111,7 @@ class InputColorRoot extends Component<InputColorAsProps> {
         <SInputContainer>
           <span aria-hidden='true'>#</span>
           <SInput>
-            <Input ml={1} w={135} state={state} onKeyDown={this.handlekeyDown}>
+            <Input ml={1} w={135} state={state} size={size} onKeyDown={this.handlekeyDown}>
               <SInputValue
                 render={Input.Value}
                 placeholder='FFFFFF'
diff --git a/semcore/color-picker/src/index.d.ts b/semcore/color-picker/src/index.d.ts
index c906de4a1e..342f2244d4 100644
--- a/semcore/color-picker/src/index.d.ts
+++ b/semcore/color-picker/src/index.d.ts
@@ -74,6 +74,10 @@ export type InputColorProps = InputProps & {
    * Fired with entered value when user clicks on the check icon or hits `Enter` or `Space`
    */
   onAdd?: (value: string, event: React.MouseEvent | React.KeyboardEvent) => void;
+  /**
+   * Handle changes of state
+   */
+  onStateChange?: (state: 'normal' | 'valid' | 'invalid') => void;
 };
 
 /** @deprecated */
@@ -110,7 +114,7 @@ export type ColorPickerProps = DropdownProps & {
 
 /** @deprecated */
 export interface IPaletteManagerProps extends PaletteManagerProps, UnknownProperties {}
-export type PaletteManagerProps = BoxProps & {
+export type PaletteManagerProps = {
   /**
    * Array of color items. Should be used with `onColorsChange` property together
    * @default []
diff --git a/stories/components/color-picker/docs/color-picker.stories.tsx b/stories/components/color-picker/docs/color-picker.stories.tsx
index 83889e3305..76ee8d00b6 100644
--- a/stories/components/color-picker/docs/color-picker.stories.tsx
+++ b/stories/components/color-picker/docs/color-picker.stories.tsx
@@ -3,10 +3,8 @@ import type { Meta, StoryObj } from '@storybook/react-vite';
 import React from 'react';
 
 import { BasicExampleTest } from './__tests__/basic_example.test';
-import { InputValidationTest } from './__tests__/input_validation.test';
 import BasicExampleExample from './examples/basic_example';
 import CustomTriggerExample from './examples/custom_trigger';
-import InputValidationExample from './examples/input_validation';
 import PalettemanagerExample from './examples/palettemanager';
 import PredefinedPaletteExample from './examples/predefined_palette';
 import { playWrapper } from '../../../utils/playWrapper';
@@ -29,11 +27,6 @@ export const CustomTrigger: Story = {
   render: CustomTriggerExample,
 };
 
-export const InputValidation: Story = {
-  render: InputValidationExample,
-  play: playWrapper(InputValidationTest),
-};
-
 export const Palettemanager: Story = {
   render: PalettemanagerExample,
 };
diff --git a/stories/components/color-picker/tests/color-picker.stories.tsx b/stories/components/color-picker/tests/color-picker.stories.tsx
index e171cff8cf..215e2b9367 100644
--- a/stories/components/color-picker/tests/color-picker.stories.tsx
+++ b/stories/components/color-picker/tests/color-picker.stories.tsx
@@ -6,8 +6,11 @@ import BaseNoPaletteManagerExample from './examples/base-no-palette-manager';
 import ColorPickerPropsExample from './examples/color-picker-props';
 import ColorsAndPaletterManagerPropsExample from './examples/colors-and-palette-manager-colors-props';
 import InputColorAndItemsPropsExample from './examples/input-color-and-items-props';
+import InputValidationExample from './examples/input_validation';
 import LabelAndColorExpandedExample from './examples/label-and-color-expanded';
 import TriggersExample from './examples/triggers';
+import { playWrapper } from '../../../utils/playWrapper';
+import { InputValidationTest } from '../docs/__tests__/input_validation.test';
 
 const meta: Meta<typeof ColorPicker> = {
   title: 'Components/ColorPicker/Tests',
@@ -41,3 +44,8 @@ export const ColorPickerProps: Story = {
 export const ColorsAndPaletterManagerProps: Story = {
   render: ColorsAndPaletterManagerPropsExample,
 };
+
+export const InputValidation: Story = {
+  render: InputValidationExample,
+  play: playWrapper(InputValidationTest),
+};
diff --git a/stories/components/color-picker/tests/examples/colors-and-palette-manager-colors-props.tsx b/stories/components/color-picker/tests/examples/colors-and-palette-manager-colors-props.tsx
index fda990dbbb..cd098e872a 100644
--- a/stories/components/color-picker/tests/examples/colors-and-palette-manager-colors-props.tsx
+++ b/stories/components/color-picker/tests/examples/colors-and-palette-manager-colors-props.tsx
@@ -24,8 +24,6 @@ const Demo = () => {
             ]}
           />
           <PaletteManager
-            w={200}
-            wMax={300}
             colors={customColors}
             defaultColors={['#00FF00', '#0000FF']}
             onColorsChange={(newColors, event) => {
@@ -59,8 +57,6 @@ const Demo = () => {
               ]}
             />
             <PaletteManager
-              w={500}
-              h={500}
               defaultColors={['#00FF00', '#0000FF']}
               onColorsChange={(newColors, event) => {
                 console.log('Updated palette:', newColors);
diff --git a/stories/components/color-picker/docs/examples/input_validation.tsx b/stories/components/color-picker/tests/examples/input_validation.tsx
similarity index 77%
rename from stories/components/color-picker/docs/examples/input_validation.tsx
rename to stories/components/color-picker/tests/examples/input_validation.tsx
index 5785c6149c..ad635cb328 100644
--- a/stories/components/color-picker/docs/examples/input_validation.tsx
+++ b/stories/components/color-picker/tests/examples/input_validation.tsx
@@ -4,14 +4,16 @@ import { Text } from '@semcore/ui/typography';
 import React from 'react';
 
 const Demo = () => {
-  const [state, setState] = React.useState<'normal' | 'invalid'>('normal');
+  const [state, setState] = React.useState<'normal' | 'invalid' | 'valid'>('normal');
 
   const onChange = (value: any) => {
     if (value.toLowerCase() === 'ffffff') {
       setState('invalid');
+      return false;
     }
-
-    return false;
+  };
+  const handleChangeState = (state: 'normal' | 'invalid' | 'valid') => {
+    setState(state);
   };
 
   return (
@@ -25,7 +27,7 @@ const Demo = () => {
           <ColorPicker.Colors />
           <PaletteManager>
             <PaletteManager.Colors />
-            <PaletteManager.InputColor state={state} onChange={onChange} />
+            <PaletteManager.InputColor state={state} onChange={onChange} onStateChange={handleChangeState} />
           </PaletteManager>
         </ColorPicker.Popper>
       </ColorPicker>
diff --git a/website/docs/components/color-picker/color-picker-code.md b/website/docs/components/color-picker/color-picker-code.md
index e6ace453d1..27c893d13f 100644
--- a/website/docs/components/color-picker/color-picker-code.md
+++ b/website/docs/components/color-picker/color-picker-code.md
@@ -15,18 +15,6 @@ PaletteManager lets you add your own colors by typing in the hexadecimal code an
 
 :::
 
-## Input validation
-
-To prevent users from entering white as a color option, replace the default validation function in `PaletteManager.InputColor` with your own custom validation function using the `onChange` prop. Here is an example:
-
-::: sandbox
-
-<script lang="tsx">
-  export Demo from 'stories/components/color-picker/docs/examples/input_validation.tsx';
-</script>
-
-:::
-
 ## Custom trigger
 
 You have complete control over the appearance of ColorPicker, including the trigger.